Skip to main content

React Query Builder

The Query Builder Component for React

Sensible defaults

Build complex queries with robust out-of-the-box features.

Check out the demo to see the code that generated this query builder.

Convert to ⇒
(firstName like 'Stev%' and lastName in ('Vai', 'Vaughan') and age > '28' and (isMusician = TRUE or instrument = 'Guitar') and groupedField1 = groupedField4 and birthdate between DATE '1954-10-03' and '1960-06-06')

Export/import

Convert to and from SQL, MongoDB, and several other query formats. The code block reflects the query above converted to the selected format.

Extensible

Provide custom components for maximum flexibility, or use one of the official compatibility packages for libraries like MUI, Bootstrap, and others.

react-datepicker
react-select
Cowbell
More cowbell
react-slider
20
60

Flexible styling

Tweak the default styles or come up with your own. All deviations from the default styles in the query builder , including re-ordering the elements, have been achieved with pure CSS using the standard classes assigned by the component.