Structured-Filter-React is a React part, written in TypeScript, for constructing structured search/filter queries.
With it you may construct structured search situations like Firstname begins with ‘A’ and Birthday after 1/1/1990 and Class in (Household, Buddies)…
Take a look at the Demo.
Mild theme:
Darkish theme:
That is the React re-write of Structured-Filter, the unique jQuery UI widget.
npm set up structured-filter-react
react and react-dom (18 or 19) are peer dependencies and should already be put in in your mission.
import Filter from "structured-filter-react";
import "structured-filter-react/dist/index.css";
const fields = [
{ id: "lastname", type: "text", label: "Lastname" },
{ id: "firstname", type: "text", label: "Firstname" },
{ id: "active", type: "boolean", label: "Is active" },
{ id: "age", type: "number", label: "Age" },
{ id: "bday", type: "date", label: "Birthday" },
{
id: "category", type: "list", label: "Category",
list: [
{ id: "1", text: "Family" },
{ id: "2", text: "Friends" },
{ id: "3", text: "Business" },
{ id: "4", text: "Acquaintances" },
{ id: "5", text: "Other" },
],
},
];
const App = () => <Filter fields={fields} />;
Verify the Demo for a full instance, together with studying the present situations again out by way of onChange.
Every discipline will need to have an id, a kind, and a label.
id– distinctive identifier for the sphere.label– displayed discipline identify.kind– one in every of:textual content,quantity,boolean,date,time,checklist.
Fields of kind checklist should even have a checklist property: an array of { id, textual content } choices.
The filter’s worth is an array of situations, every formed as:
null
The obtainable operators rely upon the sphere’s kind:
| Kind | Operators |
|---|---|
textual content |
equals (eq), not equal (ne), begins with (sw), comprises (ct), would not comprise (nct), finishes with (fw), is empty (null), will not be empty (nn) |
quantity |
= (eq), != (ne), > (gt), < (lt), is empty (null), will not be empty (nn) |
boolean |
equals (eq), is empty (null), will not be empty (nn) |
date |
on/not on (eq/ne), after (gt), earlier than (lt), between/not between (bw/nbw), is empty (null), will not be empty (nn) |
time |
at/not at (eq/ne), after (gt), earlier than (lt), between/not between (bw/nbw), is empty (null), will not be empty (nn) |
checklist |
any of (in), is empty (null), will not be empty (nn) |
Observe:
between/not betweenare uncovered within the operator dropdown fordate/timefields, however the worth editor at present solely captures a single worth — a second “to” enter is not carried out but.
| Prop | Kind | Required | Description |
|---|---|---|---|
fields |
Area[] |
sure | The checklist of fields obtainable to construct situations from. |
onChange |
(situations: Situation[]) => void |
no | Referred to as every time the checklist of situations adjustments. |
The package deal exports its TypeScript sorts alongside the part:
import kind { Area, FieldType, ListOption, Situation, ConditionValue } from "structured-filter-react";
npm set up # set up dependencies
npm run demo # run the demo app at http://localhost:3001
npm run construct # construct the library to dist/
npm run typecheck # type-check the mission
Structured-Filter-React is launched underneath the MIT license.
Encourage this mission by turning into a sponsor.
Copyright (c) 2026 Olivier Giulieri.
