{"id":15771900,"url":"https://github.com/ljbc1994/use-list-transform","last_synced_at":"2025-05-13T01:24:45.660Z","repository":{"id":39412348,"uuid":"264417838","full_name":"ljbc1994/use-list-transform","owner":"ljbc1994","description":"🤖 Filter, sort, manipulate arrays in a react hook.","archived":false,"fork":false,"pushed_at":"2023-01-06T06:30:25.000Z","size":1203,"stargazers_count":4,"open_issues_count":13,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-05T19:44:48.205Z","etag":null,"topics":["array","hooks","list","react","transform"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ljbc1994.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-16T11:02:43.000Z","updated_at":"2022-03-23T11:19:43.000Z","dependencies_parsed_at":"2023-02-05T13:00:14.022Z","dependency_job_id":null,"html_url":"https://github.com/ljbc1994/use-list-transform","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ljbc1994%2Fuse-list-transform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ljbc1994%2Fuse-list-transform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ljbc1994%2Fuse-list-transform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ljbc1994%2Fuse-list-transform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ljbc1994","download_url":"https://codeload.github.com/ljbc1994/use-list-transform/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253852131,"owners_count":21973863,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["array","hooks","list","react","transform"],"created_at":"2024-10-04T15:06:03.322Z","updated_at":"2025-05-13T01:24:45.636Z","avatar_url":"https://github.com/ljbc1994.png","language":"TypeScript","readme":"# 🤖 use-list-transform\n\n[![Build Status](https://travis-ci.com/ljbc1994/use-list-transform.svg?branch=master)](https://travis-ci.com/ljbc1994/use-list-transform)\n[![Coverage Status](https://coveralls.io/repos/github/ljbc1994/use-list-transform/badge.svg)](https://coveralls.io/github/ljbc1994/use-list-transform)\n\n\nA 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.\n\n- TypeScript support\n- Promise-based transforms\n- Tiny API\n- Tiny size\n\n## Install\n\n```bash\nnpm install use-list-transform --save\n```\n\n## Usage\n\n```tsx\nimport useListTransform from \"use-list-transform\";\n\nconst searchTerm = ({ list, data }) =\u003e list.filter((item) =\u003e item.name.includes(data.searchTerm)); \n\nconst SearchList = ({ list }) =\u003e {\n    const { transformed, setData } = useListTransform({ \n        list, \n        transform: [searchTerm] \n    });\n\n    return (\n        \u003cdiv\u003e\n            \u003cinput type=\"text\" onChange={(evt) =\u003e setData({ searchTerm: evt.target.value })}/\u003e\n            \u003cul\u003e\n                {transformed.map((item, index) =\u003e (\n                    \u003cli key={index}\u003e{item.name}\u003c/li\u003e\n                ))}\n            \u003c/ul\u003e\n        \u003c/div\u003e\n    );\n}\n```\n\n## API\n\n### Options\n\n- `list`: An array of values to apply transforms on.\n- `transformData`: The data given to the transform functions to apply transformations.\n- `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`.\n- `throwOnError`: *(Default: false)* If set to true, all transform errors will be thrown and not handled by the hook.\n- `onLoading` *`(loading: boolean) =\u003e void`*: Triggers prior to applying transformations and after it has completed.\n- `onError` *`(error: Error) =\u003e void`*: Triggers when an error occurs. \n- `onListUpdate` *`(list: TListItem[]) =\u003e void`*: Triggers when the transformed list has been updated. \n\n### Return values\n\n- `transformed`: The transformed array of values.\n- `transformData`: The data given to the transform functions.\n- `setData` *`(data: TTransformData) =\u003e void`*: Set the transform data.\n- `updateData`: *`(data: Partial\u003cTTransformData\u003e) =\u003e void`*: Update the existing transform data.\n- `resetData`: *`() =\u003e void`*: Reset the transform data to the original data passed by the options.\n- `loading`: Whether transforms are being applied.\n- `error`: Returns an error if an error has occurred during transform.\n\n## Examples\n\n### Multiple transforms\n\n```jsx\nimport useListTransform from \"use-list-transform\";\n\nconst byAge = ({ data }) =\u003e (item) =\u003e item.age == data.age;\nconst byTags = ({ data }) =\u003e (item) =\u003e item.tags.some((t) =\u003e data.tags.include(t));\n\nconst SearchList = ({ searchList }) =\u003e {\n    const tags = [\"ricky\", \"steve\", \"karl\"];\n\n    const { transformed, updateData, transformData } = useListTransform({ \n        list: searchList, \n        transform: [byAge, byTags] \n    });\n\n    function onToggleTag(tag) {\n        const tagIndex = transformData.tags.findIndex((t) =\u003e t === tag);\n\n        updateData({\n            tags: tagIndex === -1 \n                ? [...transformData.tags, tag]\n                : transformData.tags.slice(tagIndex)\n        })\n    }\n\n    return (\n        \u003cdiv\u003e\n            \u003cdiv\u003e\n                \u003cul\u003e\n                    {tags.map((tag, index) =\u003e (\n                        \u003cli key={tag} onClick={() =\u003e onToggleTag(tag)}\u003e\n                            {tag}\n                        \u003c/li\u003e\n                    ))}\n                \u003c/ul\u003e\n            \u003c/div\u003e\n            \u003cul\u003e\n                {transformed.map((item, index) =\u003e \u003cli\u003e{item.name}\u003c/li\u003e)}\n            \u003c/ul\u003e\n        \u003c/div\u003e\n    );\n}\n```\n\n### Promise-based transform requests (i.e. web workers)\n\n```jsx\n// `greenlet` - moves async functions into its own threads\nimport greenlet from \"greenlet\";\nimport useListTransform from \"use-list-transform\";\n\nconst byWebWorker = greenlet(async ({ list, data }) =\u003e {\n    // expensive operation on another thread..\n    return list;\n});\n\nconst SearchList = ({ searchList }) =\u003e {\n    const { transformed, setData, loading } = useListTransform({ \n        list: searchList, \n        transform: [byWebWorker] \n    });\n\n    return (\n        \u003cdiv\u003e\n            {loading \u0026\u0026 \u003cp\u003eTransforming...\u003c/p\u003e}\n            \u003cinput type=\"text\" onChange={(evt) =\u003e setData({ searchTerm: evt.target.value })}/\u003e\n            \u003cul\u003e\n                {transformed.map((item, index) =\u003e \u003cli\u003e{item.name}\u003c/li\u003e)}\n            \u003c/ul\u003e\n        \u003c/div\u003e\n    );\n}\n```\n\n## Contributors\n\n- @ljbc1994","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fljbc1994%2Fuse-list-transform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fljbc1994%2Fuse-list-transform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fljbc1994%2Fuse-list-transform/lists"}