Installation and initialization

SVAR Filter is an open-source library distributed under the MIT license.

Installing react-filter

To install the React Filter library, you should run the following command:

// npm
npm install @svar-ui/react-filter

// yarn
yarn add @svar-ui/react-filter

Initializing

Import the needed component - FilterBuilder (core component), FilterEditor or FilterBar - and initialize it with its properties. For example, for FilterBuilder fields and options should be defined at the initialization stage.

import { FilterBuilder } from "@svar-ui/react-filter";
import "@svar-ui/react-filter/all.css";

const fields = [
  { id: "first_name", label: "First Name", type: "text" },
  { id: "age", label: "Age", type: "number" },
  { id: "start", label: "Start Date", type: "date", format: "%y-%m-%d" }
];

const options = {
  first_name: [ "Alex", "Adam", "John", "Jane" ],
  age: [ 17, 21, 35, 42 ],
  start: [ new Date(2025, 4, 7), new Date(2025, 4, 10) ]
};

export default function App() {
  return <FilterBuilder fields={fields} options={options} />;
}

For the initialization instructions of each component, refer to the corresponding sections: FilterBuilder, FilterEditor, FilterBar.