react-querybuilder
TypeScript icon, indicating that this package has built-in type declarations

8.0.0 • Public • Published

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.

Screenshot

Custom components 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

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} />;
};

[!TIP]

To enable drag-and-drop, install the @react-querybuilder/dnd package and nest QueryBuilder under QueryBuilderDnD.

Export

To export queries as SQL, MongoDB, or one of several other formats, use the formatQuery function.

const query = {
  combinator: 'and',
  rules: [
    {
      field: 'first_name',
      operator: 'beginsWith',
      value: 'Stev',
    },
    {
      field: 'last_name',
      operator: 'in',
      value: 'Vai, Vaughan',
    },
  ],
};
const sqlWhere = formatQuery(query, 'sql');
console.log(sqlWhere);
// `(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 a full SELECT statement or the WHERE clause by itself (everything but the expressions in the WHERE clause will be ignored). Trailing semicolon is optional.

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.)

Package Sidebar

Install

npm i react-querybuilder

Weekly Downloads

77,111

Version

8.0.0

License

MIT

Unpacked Size

5.95 MB

Total Files

315

Last publish

Collaborators

  • pavanpodila
  • jakeboone02