react-querybuilder

react-querybuilder

The Query Builder component for React

React Query Builder is a fully customizable query builder component for React, along with a collection of utility functions for importing from, and exporting to, various query languages like SQL, MongoDB, and more.

• Demo
• Full documentation
• CodeSandbox / StackBlitz example projects

Basic usage

npm i react-querybuilder
# OR yarn add / pnpm add / bun add

import { useState } from 'react';
import { Field, QueryBuilder, RuleGroupType } from 'react-querybuilder';
import 'react-querybuilder/dist/query-builder.css';

const fields: Field[] = [
  { name: 'firstName', label: 'First Name' },
  { name: 'lastName', label: 'Last Name' },
  { name: 'age', label: 'Age', inputType: 'number' },
  { name: 'address', label: 'Address' },
  { name: 'phone', label: 'Phone' },
  { name: 'email', label: 'Email', validator: ({ value }) => /^[^@]+@[^@]+/.test(value) },
  { name: 'twitter', label: 'Twitter' },
  { name: 'isDev', label: 'Is a Developer?', valueEditorType: 'checkbox', defaultValue: false },
];

const initialQuery: RuleGroupType = {
  combinator: 'and',
  rules: [],
};

export const App = () => {
  const [query, setQuery] = useState(initialQuery);

  return <QueryBuilder fields={fields} defaultQuery={query} onQueryChange={setQuery} />;
};

Customizations are not limited to the following libraries, but these have first-class support through their respective compatibility packages:

Library	Compatibility package	Demo	Example projects
Ant Design	@react-querybuilder/antd	demo	CodeSandbox · StackBlitz
Bootstrap	@react-querybuilder/bootstrap	demo	CodeSandbox · StackBlitz
Bulma	@react-querybuilder/bulma	demo	CodeSandbox · StackBlitz
Chakra UI	@react-querybuilder/chakra	demo	CodeSandbox · StackBlitz
Fluent UI	@react-querybuilder/fluent	demo	CodeSandbox · StackBlitz
Mantine	@react-querybuilder/mantine	demo	CodeSandbox · StackBlitz
MUI	@react-querybuilder/material	demo	CodeSandbox · StackBlitz
React Native	@react-querybuilder/native		CodeSandbox · StackBlitz
Tremor	@react-querybuilder/tremor	demo	CodeSandbox · StackBlitz

[!TIP]

To enable drag-and-drop, use @react-querybuilder/dnd.

For enhanced date/time support, use @react-querybuilder/datetime.

Export

To export queries as a SQL WHERE clause, MongoDB query object, or one of several other formats, use formatQuery.

const query = {
  combinator: 'and',
  rules: [
    {
      field: 'first_name',
      operator: 'beginsWith',
      value: 'Stev',
    },
    {
      field: 'last_name',
      operator: 'in',
      value: 'Vai, Vaughan',
    },
  ],
};

formatQuery(query, 'sql');
/*
"(first_name like 'Stev%' and last_name in ('Vai', 'Vaughan'))"
*/

Import

To import queries use parseSQL, parseMongoDB, parseJsonLogic, parseJSONata, parseCEL, or parseSpEL depending on the source.

// Tip: `parseSQL` will accept either a full `SELECT` statement or a `WHERE` clause by itself.
// Everything but the `WHERE` expressions will be ignored.

const query = parseSQL(
  `SELECT * FROM my_table WHERE first_name LIKE 'Stev%' AND last_name in ('Vai', 'Vaughan')`
);

console.log(query);
/*
{
  "combinator": "and",
  "rules": [
    {
      "field": "first_name",
      "operator": "beginsWith",
      "value": "Stev",
    },
    {
      "field": "last_name",
      "operator": "in",
      "value": "Vai, Vaughan",
    },
  ],
}
*/

Utilities

formatQuery, transformQuery, and the parse* functions can be used without importing from react (on the server, for example) like this:

import { formatQuery } from 'react-querybuilder/formatQuery';
import { parseCEL } from 'react-querybuilder/parseCEL';
import { parseJSONata } from 'react-querybuilder/parseJSONata';
import { parseJsonLogic } from 'react-querybuilder/parseJsonLogic';
import { parseMongoDB } from 'react-querybuilder/parseMongoDB';
import { parseSpEL } from 'react-querybuilder/parseSpEL';
import { parseSQL } from 'react-querybuilder/parseSQL';
import { transformQuery } from 'react-querybuilder/transformQuery';

(As of version 7, the parse* functions are only available through these extended exports.)

Changelog

[v8.5.0] - 2025-04-07

Added

• [#873] New prop autoSelectValue (documentation) behaves like autoSelectField/autoSelectOperator but for the value editor when it renders a select list.
  • The translations prop object has a new property values that accepts placeholderName, placeholderLabel, and placeholderGroupLabel properties (documentation). These translatable strings set the default values and labels when autoSelectValue is set to false.
  • A corresponding placeholderValueName option was added to formatQuery, which will now ignore rules where the value matches the placeholder value as long as placeholderValueName is defined (this behavior differs from placeholderFieldName and placeholderOperatorName, which do not need to be defined).
• [#876] Miscellaneous i18n enhancements for the "natural_language" export format:
  • translations option: Map of the words "and", "or", "true", and "false" to their translated equivalents. Also covers prefix and suffix options for rule groups.
  • wordOrder option: Based on the linguistic concept of constituent word order, this option accepts all permutations of "SVO" ("SOV", "VSO", etc.) and outputs the field, operator, and value in the corresponding order (S = field, V = operator, O = value).
  • operatorMap option: Map of operators to their natural language equivalents. If the result can differ based on the valueSource, the key should map to an array where the second element represents the string to be used when valueSource is "field". The first element will be used in all other cases.
  • Date/time formatting support: The @react-querybuilder/datetime package now supports the "natural_language" format for date-type rules. Formatting can be customized by passing locales, dateFormat, or dateTimeFormat as properties of the context parameter. These options are passed to a Intl.DateTimeFormat constructor.

Fixed

• [#877] Dynamic imports of react-dnd and related packages are now obfuscated to discourage bundlers like webpack from pre-processing those imports.