{"id":31910654,"url":"https://github.com/svar-widgets/react-filter","last_synced_at":"2025-10-13T16:54:02.860Z","repository":{"id":316985978,"uuid":"1058615771","full_name":"svar-widgets/react-filter","owner":"svar-widgets","description":"Intuitive query builder for React – add advanced filtering to your app","archived":false,"fork":false,"pushed_at":"2025-10-07T17:39:12.000Z","size":85,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-07T19:38:33.838Z","etag":null,"topics":["query","query-builder","react","react-component","reactjs"],"latest_commit_sha":null,"homepage":"https://svar.dev/react/filter/","language":"JavaScript","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/svar-widgets.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-17T10:19:31.000Z","updated_at":"2025-10-07T17:39:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"c993c323-2975-45ba-8de3-75e39ccfd24b","html_url":"https://github.com/svar-widgets/react-filter","commit_stats":null,"previous_names":["svar-widgets/react-filter"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/svar-widgets/react-filter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svar-widgets%2Freact-filter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svar-widgets%2Freact-filter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svar-widgets%2Freact-filter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svar-widgets%2Freact-filter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/svar-widgets","download_url":"https://codeload.github.com/svar-widgets/react-filter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svar-widgets%2Freact-filter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279016119,"owners_count":26085804,"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","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["query","query-builder","react","react-component","reactjs"],"created_at":"2025-10-13T16:54:01.827Z","updated_at":"2025-10-13T16:54:02.851Z","avatar_url":"https://github.com/svar-widgets.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# SVAR React Filter | Query Builder\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[Website](https://svar.dev/react/filter/) • [Getting Started](https://docs.svar.dev/react/filter/getting_started/) • [Demos](https://docs.svar.dev/react/filter/samples/)\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![npm](https://img.shields.io/npm/v/@svar-ui/react-filter.svg)](https://www.npmjs.com/package/@svar-ui/react-filter)\n[![License](https://img.shields.io/github/license/svar-widgets/react-filter)](https://github.com/svar-widgets/react-filter/blob/main/license.txt)\n[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/react-filter.svg)](https://www.npmjs.com/package/@svar-ui/react-filter)\n\n\u003c/div\u003e\n\n[SVAR React Filter](https://svar.dev/react/filter/) is a library of three React components that help you add flexible filtering features to your apps: from simple filter bars to advanced query builders. It provides an intuitive UI for creating and editing filtering rules, grouping filters, defining conditions, and choosing the logic (AND/OR).\n\n\u003cdiv align=\"center\"\u003e\n\t\n\u003cimg src=\"https://svar.dev/images/github/github_filter.png\" alt=\"SVAR Filter - React Query Builder Component\" style=\"width: 700px;\"\u003e\n\n\u003c/div\u003e\n\n### :jigsaw: Included Components\n\nSVAR React Filter library includes the following components:\n\n**FilterBuilder** is the main component that provides an interactive interface for building complex queries and filtering large datasets.\n\n**FilterEditor** allows you to create a filtering rule for a single field, and can be used as a standalone component.\n\n**FilterBar** is a simplified filter bar UI with inputs and select controls. It allows building filtering rules for several fields and combining them with logical operators. Can be used above data tables or dashboards.\n\n### :sparkles: Key features:\n\n-   Complex filter queries: multi-field rules, groups of filters, nested filters, AND/OR logic.\n-   Multiple data types: text, number, and date filtering with type-specific operators.\n-   Configurable layouts: vertical, horizontal, or minimal filter bar layouts.\n-   Localization: labels and date formats can be customized to match users' locale.\n-   Dynamic loading: filter options can be loaded on demand when a new filter is added.\n-   JSON output: the component outputs structured JSON that can be transformed into SQL or other query formats.\n-   Intuitive, straightforward API: easily set and retrieve values, customize filters, and track changes.\n-   Full TypeScript support and compatibility with React 18 and 19.\n\n[Check out the demos](https://docs.svar.dev/react/filter/samples/) to see all SVAR React Filter features in action.\n\n\n### :hammer_and_wrench: How to Use\n\nTo start using the components from the **Filter** package, simply import the package and include the desired component in your React file:\n\n```jsx\nimport { FilterBuilder } from \"@svar-ui/react-filter\";\nimport \"@svar-ui/react-filter/all.css\";\n\nconst fields = [\n    {\n        id: \"first_name\",\n        label: \"First Name\",\n        type: \"text\",\n    },\n    {\n        id: \"last_name\",\n        label: \"Last Name\",\n        type: \"text\",\n    },\n];\nconst myComponent =\u003e (\u003cFilterBuilder fields={fields} /\u003e);\n```\n\nSee the [getting started guide](https://docs.svar.dev/react/filter/getting_started/) to quickly set up and begin using SVAR Filter components in your React projects.\n\n### :speech_balloon: Need Help?\n\n[Post an Issue](https://github.com/svar-widgets/react-filter/issues/) or use our [community forum](https://forum.svar.dev).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvar-widgets%2Freact-filter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvar-widgets%2Freact-filter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvar-widgets%2Freact-filter/lists"}