{"id":27884354,"url":"https://github.com/useswype/refilter","last_synced_at":"2025-06-11T12:33:12.900Z","repository":{"id":264663106,"uuid":"839093573","full_name":"useswype/refilter","owner":"useswype","description":"A library to help you add filtering to your ReactJs applications","archived":false,"fork":false,"pushed_at":"2025-01-07T18:25:23.000Z","size":1407,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-05T06:41:34.046Z","etag":null,"topics":["filtering","headlessui","nextjs","react"],"latest_commit_sha":null,"homepage":"https://refilter.swypex.com","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/useswype.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,"zenodo":null}},"created_at":"2024-08-07T00:43:55.000Z","updated_at":"2025-04-10T17:09:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"9065dd94-bac6-46e3-ae53-4249bee41555","html_url":"https://github.com/useswype/refilter","commit_stats":null,"previous_names":["useswype/refilter"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/useswype%2Frefilter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/useswype%2Frefilter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/useswype%2Frefilter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/useswype%2Frefilter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/useswype","download_url":"https://codeload.github.com/useswype/refilter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/useswype%2Frefilter/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259265037,"owners_count":22831064,"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":["filtering","headlessui","nextjs","react"],"created_at":"2025-05-05T06:36:36.700Z","updated_at":"2025-06-11T12:33:12.831Z","avatar_url":"https://github.com/useswype.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Logo](./src/assets/emblem.png)](https://www.npmjs.com/package/@swypex/refilter)\r\n\r\n\u003ch1 align=\"center\"\u003e@swypex/refilter\u003c/h1\u003e\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n\r\n[![Version](https://img.shields.io/npm/v/@swypex/refilter.svg)](https://www.npmjs.com/package/@swypex/refilter)\r\n[![Status](https://img.shields.io/badge/status-active-success.svg)](https://github.com/useswype/refilter/)\r\n[![GitHub Pull Requests](https://img.shields.io/github/issues-pr/useswype/refilter)](https://github.com/useswype/refilter/pulls)\r\n[![GitHub Issues](https://img.shields.io/github/issues/useswype/refilter)](https://github.com/useswype/refilter/issues)\r\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)\r\n\r\n\u003c/div\u003e\r\n\r\n---\r\n\r\n\r\nA powerful and flexible React library to effortlessly add robust filtering capabilities to your applications, simplifies\r\ncreating dynamic and interactive user interfaces, allowing users to filter through large datasets easily.\r\n\r\n## 📝 Table of Contents\r\n\r\n- [About](#-about)\r\n- [Getting Started](#-getting-started)\r\n- [Usage](#-usage)\r\n- [Built Using](#-built-using)\r\n- [Contributing](https://github.com/useswype/refilter/graphs/contributors)\r\n\r\n## 🧐 About\r\n\r\nThis package is an ideal solution for implementing advanced, strongly-typed filtering systems. By focusing on managing\r\nfilter states and interactions, it allows developers to invest their time when it matters most: creating tailored\r\nfilter UIs and handling business logic.\r\n\r\n### Key Features\r\n\r\n- Simplified State Management: Offload the complexity of managing filter states, freeing you to focus on building\r\n  filter-specific UI and business logic.\r\n- Dynamic Badge System: Automatically generate badges for applied filters, offering quick access to remove or modify\r\n  them.\r\n- Customizable UI: Define the rendering of badges, side panel items \u0026 content for each filter.\r\n- Overridable Styles: Customize all class names, or use the provided HOC to style the component once and return a\r\n  tailored version.\r\n- Strongly Typed: Built with TypeScript, ensuring a type-safe and robust developer experience.\r\n\r\n## 🎥 Demo / Working\r\n[Live Demo](https://refilter.swypex.com)\r\n\r\n\r\n![Working](./src/assets/demo.gif)\r\n\r\n## 💭 Preview\r\n\r\n![Working](./src/assets/preview.png)\r\n\r\n## 🏁 Getting Started\r\n\r\n### Installation\r\n\r\nMake sure you have node version \u003e= 16 and react version \u003e= 16\r\n\r\n```bash\r\nnpm i @swypex/refilter\r\n``` \r\n\r\nImport this style sheet\r\n\r\n```css\r\n@import '~@swypex/refilter/output/main.css';\r\n```\r\n\r\n## 🎈 Usage\r\n\r\n### Default Swypex design\r\n\r\n```tsx\r\nimport { GenericFilter } from '@swypex/refilter';\r\n\r\n\u003cGenericFilter /\u003e\r\n```\r\n\r\n### Custom styled generic filter\r\n\r\n```tsx\r\nimport { createStyledGenericFilter } from '@swypex/refilter';\r\n\r\nexport const StyledGenericFilter = createStyledGenericFilter({\r\n  closeButton: 'bg-red-100',\r\n});\r\n\r\n\r\nimport { StyledGenericFilter as GenericFilter } from '@/components/GenericFilterWrapper';\r\n\r\n\u003cGenericFilter /\u003e\r\n```\r\n\r\n### Specific style for the filter\r\n\r\n```tsx\r\nimport { GenericFilter } from '@swypex/refilter';\r\n\r\n\u003cGenericFilter\r\n  classNames={{\r\n    closeButton: 'bg-red-100',\r\n  }}\r\n/\u003e\r\n```\r\n\r\n## How to create your filter component\r\n\r\n### the filter component has the constant boilerplate code you need to follow\r\n\r\n```tsx\r\nexport interface FilterComponentValue {\r\n  value: Nullable\u003cboolean\u003e;\r\n}\r\n\r\nexport function FilterComponent(\r\n  props: FilterComponentProps\u003cFilterComponentValue\u003e\r\n) {\r\n  const { onChange, value } = props;\r\n  return \u003cdiv\u003e\u003c/div\u003e;\r\n}\r\n\r\nfunction FilterComponentFilterShortcut(\r\n  props: ShortcutComponentProps\u003cFilterComponentValue\u003e\r\n) {\r\n  const { value, onChange } = props;\r\n  return \u003cdiv\u003e\u003c/div\u003e;\r\n}\r\n\r\nFilterComponent.Shortcut = FilterComponentFilterShortcut;\r\n\r\nFilterComponent.comparator = (\r\n  a: FilterComponentValue,\r\n  b: FilterComponentValue\r\n) =\u003e {\r\n  return a.value === b.value;\r\n};\r\n\r\nFilterComponent.getBadgeCount = (value: FilterComponentValue) =\u003e {\r\n  return value.value !== null ? 1 : 0;\r\n};\r\n```\r\n\r\n## ⛏️ Built Using\r\n\r\n- [React](https://react.dev/)\r\n- [Tailwind](https://tailwindcss.com/)\r\n- [Typescript](https://www.typescriptlang.org/)\r\n- [Rollup](https://rollupjs.org/)\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuseswype%2Frefilter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuseswype%2Frefilter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuseswype%2Frefilter/lists"}