onhange
Description
Fires when changes are made and applied via the user interfaceThe event is triggered when a user updates a rule.
Usage
onChange?: (ev: {
  value: {
    rules?: ({
      field: string | number,
      type?: "number" | "text" | "date" | "tuple",
      predicate?: "month" | "year",
      filter?: string,
      includes?: any[],
      value?: any
    } | {
      rules?: any[]; // nested rules
      glue?: "and" | "or",
    })[];
    glue?: "and" | "or",
  };
}) => void;
Parameters
The callback of the event takes the value object with the following parameters:
- glue- (required) the logic for combining filtering rules:- "and"- returns records that satisfy all rules
- "or"- returns records that satisfy at least one rule
 
- rules- (required) an array of filtering rules. It can be an individual rule or a group of rules. Each rule object has the following parameters:- field- (required) the id of a field. It should be the same as the corresponding field id of the- fieldsproperty
- type- (optional) filter type: "text" (default) | "number"
- predicate- (optional) Date part extractor ("month" or "year") for date fields
- filter- (optional) the filter operator available for this type
- includes- (optional) an array of values to include (strings, numbers, or dates)
- value- (optional) the value to filter by
 
Example
In the example below we track changes made to the FilterBar and log the current filter configuration into console:
import { FilterBar } from "@svar-ui/react-filter";
const fields = [
  "first_name",
  { id: "age", type: "number" },
  { id: "country", type: "text", options: ["USA", "Germany"] },
];
function handleChange(ev) {
  console.log(ev.value);
}
export default function Example() {
  return `<FilterBar fields={fields} onChange={handleChange} />`;
}
Related articles: FilterBar Guide