Skip to main content

How to access FilterBuilder API

You can use either of the two ways below to get access to the FilterBuilder API:

  • apply the init handler function with the api as the parameter
  • use a React ref to store the api object

Apply the init handler​

You can access FilterBuilder API using the init handler function that takes api as the parameter.

The example below shows how to add a rule without opening the editor form and set the filtering value. To make this possible, we get access to the FilterBuilder API using the init prop, and then intercept and modify the add-rule action using the api.intercept() method.

import { getData } from "./common/data";
import { FilterBuilder } from "@svar-ui/react-filter";

const { value, fields, options } = getData();

function Example() {
  const init = (api) => {
    api.intercept("add-rule", (ev) => {
      ev.edit = false;
    });
  };

  return <FilterBuilder value={value} options={options} fields={fields} init={init} />;
}

Use a ref to access api​

You can access FilterBuilder API via the api gateway object by using a React ref. Pass the ref to the FilterBuilder component

In the example below we use the api.getValue() method of the FilterBuilder API to retrieve the current filtering configuration. When the user clicks the "Show value" button, the current filter (rules and groups) is fetched and logged to the console.

import { useRef } from "react";
import { getData } from "../data";
import { FilterBuilder } from "@svar-ui/react-filter";
import { Button } from "@svar-ui/react-core";

function Example() {
  const { value, fields, options } = getData();
  const api = useRef();

  function logValue() {
    console.log(api.current.getValue());
  }

  return (
    <>
      <Button type="secondary" onClick={logValue}>Log value</Button>
      <FilterBuilder ref={api} value={value} fields={fields} options={options} />
    </>
  );
}

api methods​

See each method description in the next sections.