Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ljbc1994/use-list-transform
🤖 Filter, sort, manipulate arrays in a react hook.
https://github.com/ljbc1994/use-list-transform
array hooks list react transform
Last synced: 18 days ago
JSON representation
🤖 Filter, sort, manipulate arrays in a react hook.
- Host: GitHub
- URL: https://github.com/ljbc1994/use-list-transform
- Owner: ljbc1994
- License: mit
- Created: 2020-05-16T11:02:43.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T06:30:25.000Z (almost 2 years ago)
- Last Synced: 2024-10-14T14:11:16.390Z (about 1 month ago)
- Topics: array, hooks, list, react, transform
- Language: TypeScript
- Homepage:
- Size: 1.15 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🤖 use-list-transform
[](https://travis-ci.com/ljbc1994/use-list-transform)
[](https://coveralls.io/github/ljbc1994/use-list-transform)
A tiny, simple React hook that handles performing functions on an array. In other words, you provide the functions for sorting, filtering and manipulating the array and the hook will return the transformed array. Supports promise transforms.
- TypeScript support
- Promise-based transforms
- Tiny API
- Tiny size
## Install
```bash
npm install use-list-transform --save
```
## Usage
```tsx
import useListTransform from "use-list-transform";
const searchTerm = ({ list, data }) => list.filter((item) => item.name.includes(data.searchTerm));
const SearchList = ({ list }) => {
const { transformed, setData } = useListTransform({
list,
transform: [searchTerm]
});
return (
setData({ searchTerm: evt.target.value })}/>
{transformed.map((item, index) => (
- {item.name}
))}
);
}
```
## API
### Options
- `list`: An array of values to apply transforms on.
- `transformData`: The data given to the transform functions to apply transformations.
- `transform`: An array of transform functions or a single function to apply to the list. The function is given an object containing the `list`, `data` (the transform data) and the `previousData` (previous transform data). The function must return the transformed `list`.
- `throwOnError`: *(Default: false)* If set to true, all transform errors will be thrown and not handled by the hook.
- `onLoading` *`(loading: boolean) => void`*: Triggers prior to applying transformations and after it has completed.
- `onError` *`(error: Error) => void`*: Triggers when an error occurs.
- `onListUpdate` *`(list: TListItem[]) => void`*: Triggers when the transformed list has been updated.
### Return values
- `transformed`: The transformed array of values.
- `transformData`: The data given to the transform functions.
- `setData` *`(data: TTransformData) => void`*: Set the transform data.
- `updateData`: *`(data: Partial) => void`*: Update the existing transform data.
- `resetData`: *`() => void`*: Reset the transform data to the original data passed by the options.
- `loading`: Whether transforms are being applied.
- `error`: Returns an error if an error has occurred during transform.
## Examples
### Multiple transforms
```jsx
import useListTransform from "use-list-transform";
const byAge = ({ data }) => (item) => item.age == data.age;
const byTags = ({ data }) => (item) => item.tags.some((t) => data.tags.include(t));
const SearchList = ({ searchList }) => {
const tags = ["ricky", "steve", "karl"];
const { transformed, updateData, transformData } = useListTransform({
list: searchList,
transform: [byAge, byTags]
});
function onToggleTag(tag) {
const tagIndex = transformData.tags.findIndex((t) => t === tag);
updateData({
tags: tagIndex === -1
? [...transformData.tags, tag]
: transformData.tags.slice(tagIndex)
})
}
return (
{tags.map((tag, index) => (
- onToggleTag(tag)}>
{tag}
))}
{transformed.map((item, index) => - {item.name}
)}
);
}
```
### Promise-based transform requests (i.e. web workers)
```jsx
// `greenlet` - moves async functions into its own threads
import greenlet from "greenlet";
import useListTransform from "use-list-transform";
const byWebWorker = greenlet(async ({ list, data }) => {
// expensive operation on another thread..
return list;
});
const SearchList = ({ searchList }) => {
const { transformed, setData, loading } = useListTransform({
list: searchList,
transform: [byWebWorker]
});
return (
{loading && Transforming...
}
setData({ searchTerm: evt.target.value })}/>
{transformed.map((item, index) => - {item.name}
)}
);
}
```
## Contributors
- @ljbc1994