{"id":15680248,"url":"https://github.com/denyncrawford/react-filter","last_synced_at":"2026-04-27T23:35:03.859Z","repository":{"id":242321968,"uuid":"809259932","full_name":"denyncrawford/react-filter","owner":"denyncrawford","description":"React hook to handle and standardize filters for search and routing tasks","archived":false,"fork":false,"pushed_at":"2024-06-03T07:47:59.000Z","size":52,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-05T11:38:05.071Z","etag":null,"topics":["filters","hooks","react"],"latest_commit_sha":null,"homepage":"https://react-filters.deno.dev","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/denyncrawford.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-02T07:14:11.000Z","updated_at":"2024-06-03T07:48:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"9ec36700-bb6e-4502-8514-e9eef7881766","html_url":"https://github.com/denyncrawford/react-filter","commit_stats":null,"previous_names":["denyncrawford/react-filter"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denyncrawford%2Freact-filter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denyncrawford%2Freact-filter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denyncrawford%2Freact-filter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denyncrawford%2Freact-filter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/denyncrawford","download_url":"https://codeload.github.com/denyncrawford/react-filter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246300656,"owners_count":20755400,"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":["filters","hooks","react"],"created_at":"2024-10-03T16:41:13.672Z","updated_at":"2026-04-27T23:35:03.818Z","avatar_url":"https://github.com/denyncrawford.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Search Filters (WIP) 🔍\n\n[![JSR](https://jsr.io/badges/@denyncrawford/react-filters)](https://jsr.io/@denyncrawford/react-filters)\n\nA react hook that allows you to create search filters for your react application, using a simple api and input driven by default.\n\nIt comes with a set of default IOs that can be used to serialize and deserialize the values, but you can also create your own custom IOs to handle different types of values and data structures.\n\n\u003e **Note:** This is a work in progress and the API is still subject to change.\n\n## Why?\n\nCreating filters for API requests is often a tedious and slow process. Typically, you end up implementing an overly complex solution to visualize what you're filtering in the UI, whether you're using React Query or directly making requests with Fetch or Axios. React Search Filters handles all the underlying work and provides an easy way to manage your filters using a key, value, and label approach. Inspired by React Hook Form, this module is designed with an input-first philosophy.\n\n## Demo\n\nYou can see a live demo [here](https://react-filters.deno.dev)\n\n## Installation\n\nThis package is published on the jsr registry, please follow the instructions on [the module's page](https://jsr.io/@denyncrawford/react-filters) to see how to install it for your specific runtime/package manager.\n\n## Usage\n\nOnce installed, you can import the `useFilter` hook from the package and use it in your React component. Here's an example:\n\n```tsx\nimport { useFilter } from \"@denyncrawford/react-filters\";\n\nconst MyComponent = () =\u003e {\n  const { register } = useFilter();\n\n  return (\n    \u003cdiv\u003e\n      \u003cinput\n        type=\"text\"\n        {...register({\n          name: \"myFilter\",\n          displayName: \"My Filter\",\n        })}\n      /\u003e\n      \u003cinput\n        type=\"text\"\n        {...register({\n          name: \"myCustomIO\",\n          displayName: \"My Custom IO\",\n          type: \"myCustomIO\",\n          value: \"myValue\",\n        })}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## Custom IOs\n\nYou can create your own custom IOs to handle different types of values and data structures. Here's an example of how to create a custom IO for a `Date` value:\n\n```tsx\nimport { createSafeIO } from \"@denyncrawford/react-filters\";\n\nconst dateIO = createSafeIO\u003cstring, Date\u003e({\n  serialize: ({ v, k }) =\u003e ({\n    value: v.toISOString(), // you can format the date to diplay it as you wan\n    key: k,\n  }),\n  deserialize: ({ value }) =\u003e new Date(value), // you can parse your date string as a date again\n});\n```\n\nIn this example, we're creating a custom IO called `dateIO` that serializes and deserializes dates. The `serialize` function takes a `value` and a `key` as input, and returns an object with a `value` property that represents the serialized value and a `key` property that represents the key of the filter.\n\nThe `deserialize` function takes a `value` and returns a `Date` object that represents the deserialized value.\n\nYou can then use this custom IO in your `useFilter` hook by passing it as an argument to the `customIO` prop:\n\n```tsx\nimport { useFilter } from \"@denyncrawford/react-filters\";\n\nconst MyComponent = () =\u003e {\n  const { register } = useFilter({\n    customIO: [\n      {\n        name: \"myCustomIO\",\n        io: dateIO,\n      },\n    ],\n  });\n\n  return (\n    \u003cdiv\u003e\n      \u003cDatePicker\n        {...register({\n          name: \"date\",\n          type: \"myCustomIO\",\n          defaultValue: new Date(),\n          displayName: \"Date\",\n        })}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## Displaying values\n\nYou can display the values of the filters using the `serializedValues` and `deSerializedValues` properties of the `useFilter` hook. These properties are arrays that contain objects that represent the serialized and deserialized values of the filters, respectively.\n\nHere's an example of how to display the values of the filters:\n\n```tsx\nimport { useFilter } from \"@denyncrawford/react-filters\";\n\nconst MyComponent = () =\u003e {\n  const { serializedValues, deSerializedValues } = useFilter();\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003eSerialized Values:\u003c/div\u003e\n      {serializedValues.map((value, index) =\u003e (\n        \u003cdiv key={index}\u003e{value.value}\u003c/div\u003e\n      ))}\n      \u003cdiv\u003eDe-serialized Values:\u003c/div\u003e\n      {JSON.stringify(deSerializedValues)}\n    \u003c/div\u003e\n  );\n};\n```\n\n## Handling search\n\nReact search filters is agnostic and it doesn't have any built-in search/router functionality. You can use any query/router library of your choice to handle it. There's some strategies you can use to handle search:\n\n- Getting deserialized values to provide to the query/router library directly.\n- Using the `searchString` property of the `useFilter` hook to get the search string and pass it to the query/router library.\n\nHere's an example of how to use the `searchString` property to get the search string:\n\n```tsx\nimport { useFilter } from \"@denyncrawford/react-filters\";\n\nconst MyComponent = () =\u003e {\n  const { searchString } = useFilter();\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003eSearch String:\u003c/div\u003e\n      {searchString}\n    \u003c/div\u003e\n  );\n};\n```\n\n## API Reference\n\nYou can check the API documentation [here](https://jsr.io/@denyncrawford/react-filters/doc).\n\n## Next Steps\n\n- Enhance types\n- I/O Validations\n- Add more I/O handlers for common inputs and dta structures\n- Add a quick unstyled component to display keys and values\n- Test internationalization and JSX I/O serialization capabilities\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdenyncrawford%2Freact-filter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdenyncrawford%2Freact-filter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdenyncrawford%2Freact-filter/lists"}