Getting started

This page describes how to start with SVAR React Filter widget by adding it to your React application.

Step 1. Install the package

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

npm install @svar-ui/react-filter

See also Installation instructions.

Step 2. Import components

To use the installed package in your application, you need to import one of the corresponding components: FilterBuilder, FilterEditor or FilterBar. Since FilterBuilder is the main component, here's an example of importing it from the @svar-ui/react-filter package:

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

Step 3. Initialize components

Use the corresponding component to add the widget to a page or application component:

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

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

Follow the related components sections for more information on initialization and configuration: FilterBuilder, FilterEditor, FilterBar.

Step 4. Add data

It's required to provide an array of fields and options for the components.

Fields used in filtering can be defined via the fields property:

• id - a unique identifier for the field (must match your data keys)
• label - the human-readable label used in the UI
• type - the type of the field ("text", "number", "date", "tuple")

Options are set as an object where keys are field ids and values are the options for these fields:

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

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

Step 5. Basic setup

Now you are ready for a basic setup to get a feel for the widgets before wiring up data filtering logic and configuring other settings. It's required to add the fields array and the options object and pass them to the FilterBuilder component:

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} />;
}

note

The FilterEditor and FilterBar components have slightly different API, so please have a look at their documentation or study the When to use each component guide.

Step 6. Apply a skin

To add look and feel to your application, apply a skin. The SVAR React Filter library provides two themes:

• Willow
• WillowDark

import { Willow } from "@svar-ui/react-filter";

Apply the desired theme by wrapping your application (or the part of it that uses the filter widgets) within the skin component.

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

export default function App() {
  return (
    <Willow>
      <FilterBuilder />
    </Willow>
  );
}

What's next

Now you are ready to configure the FilterBuilder widget to the needs of your application.

• Head over to the Components section for detailed setup guides on each component
• For in-depth functionality and integration details, check out the API Reference documentation

Everything you need to start building powerful, customizable filters is just a click away.