{"id":13422031,"url":"https://github.com/ukrbublik/react-awesome-query-builder","last_synced_at":"2025-05-14T09:04:33.353Z","repository":{"id":37549495,"uuid":"98418501","full_name":"ukrbublik/react-awesome-query-builder","owner":"ukrbublik","description":"User-friendly query builder for React","archived":false,"fork":false,"pushed_at":"2025-04-29T09:26:14.000Z","size":171967,"stargazers_count":2090,"open_issues_count":136,"forks_count":510,"subscribers_count":31,"default_branch":"master","last_synced_at":"2025-05-07T08:01:49.456Z","etag":null,"topics":["ant-design","antd","antdesign","filter","hacktoberfest","hacktoberfest2021","material-ui","mongo","query","query-builder","react","react-component","react-components","reactjs","sql","typescript"],"latest_commit_sha":null,"homepage":"https://ukrbublik.github.io/react-awesome-query-builder","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ukrbublik.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"ukrbublik","open_collective":"react-awesome-query-builder","issuehunt":"ukrbublik/react-awesome-query-builder"}},"created_at":"2017-07-26T12:07:17.000Z","updated_at":"2025-05-05T18:56:13.000Z","dependencies_parsed_at":"2024-05-03T02:27:58.336Z","dependency_job_id":"00ca9e50-5ade-4e0b-8d04-23e13fcc6cc6","html_url":"https://github.com/ukrbublik/react-awesome-query-builder","commit_stats":{"total_commits":789,"total_committers":86,"mean_commits":9.174418604651162,"dds":0.2965779467680608,"last_synced_commit":"57691933428d605102ea9473945556b4f59a1c72"},"previous_names":[],"tags_count":121,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ukrbublik%2Freact-awesome-query-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ukrbublik%2Freact-awesome-query-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ukrbublik%2Freact-awesome-query-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ukrbublik%2Freact-awesome-query-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ukrbublik","download_url":"https://codeload.github.com/ukrbublik/react-awesome-query-builder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253518981,"owners_count":21921084,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ant-design","antd","antdesign","filter","hacktoberfest","hacktoberfest2021","material-ui","mongo","query","query-builder","react","react-component","react-components","reactjs","sql","typescript"],"created_at":"2024-07-30T23:00:35.782Z","updated_at":"2025-05-14T09:04:33.301Z","avatar_url":"https://github.com/ukrbublik.png","language":"JavaScript","funding_links":["https://github.com/sponsors/ukrbublik","https://opencollective.com/react-awesome-query-builder","https://issuehunt.io/r/ukrbublik/react-awesome-query-builder","https://opencollective.com/react-awesome-query-builder/contribute","https://opencollective.com/react-awesome-query-builder/organization/0/website","https://opencollective.com/react-awesome-query-builder/organization/1/website","https://opencollective.com/react-awesome-query-builder/organization/2/website","https://opencollective.com/react-awesome-query-builder/organization/3/website","https://opencollective.com/react-awesome-query-builder/organization/4/website","https://opencollective.com/react-awesome-query-builder/organization/5/website","https://opencollective.com/react-awesome-query-builder/organization/6/website","https://opencollective.com/react-awesome-query-builder/organization/7/website","https://opencollective.com/react-awesome-query-builder/organization/8/website","https://opencollective.com/react-awesome-query-builder/organization/9/website"],"categories":["UI Components","JavaScript","🌐 Web Development - Frontend","API"],"sub_categories":["Miscellaneous","Confirmation Dialogs"],"readme":"\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://ukrbublik.github.io/react-awesome-query-builder/\" rel=\"noopener\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/ukrbublik/react-awesome-query-builder/19344a32349212cb7c9344a553173c2c4bc57ca6/logo_full_200.png\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003c! --\n[![travis](https://travis-ci.org/ukrbublik/react-awesome-query-builder.svg?branch=master)](https://travis-ci.com/github/ukrbublik/react-awesome-query-builder) \n[![Financial Contributors on Open Collective](https://opencollective.com/react-awesome-query-builder/all/badge.svg?label=financial+contributors)](https://opencollective.com/react-awesome-query-builder)\n--\u003e\n\n[![npm](https://img.shields.io/npm/v/@react-awesome-query-builder/ui.svg)](https://www.npmjs.com/package/@react-awesome-query-builder/ui)\n[![Smoke](https://github.com/ukrbublik/react-awesome-query-builder/actions/workflows/smoke.yml/badge.svg?text=Test)](https://github.com/ukrbublik/react-awesome-query-builder/actions/workflows/smoke.yml?query=branch%3Amaster)\n[![codecov](https://codecov.io/gh/ukrbublik/react-awesome-query-builder/branch/master/graph/badge.svg?date=20201002)](https://codecov.io/gh/ukrbublik/react-awesome-query-builder)\n[![antd](https://img.shields.io/badge/skin-Ant%20Design-blue?logo=Ant%20Design)](https://ant.design)\n[![mui](https://img.shields.io/badge/skin-Material%20UI-blue?logo=MUI)](https://mui.com)\n[![bootstrap](https://img.shields.io/badge/skin-Bootstrap-blue?logo=Bootstrap)](https://reactstrap.github.io/)\n[![fluent](https://img.shields.io/badge/skin-Fluent%20UI-blue?logo=Microsoft%20Office)](https://developer.microsoft.com/en-us/fluentui)\n[![demo](https://img.shields.io/badge/demo-blue)](https://ukrbublik.github.io/react-awesome-query-builder/)\n[![sandbox TS](https://img.shields.io/badge/sandbox-TS-blue)](https://codesandbox.io/s/github/ukrbublik/react-awesome-query-builder/tree/master/packages/sandbox?file=/src/demo/config.tsx)\n[![sandbox JS](https://img.shields.io/badge/sandbox-JS-blue)](https://codesandbox.io/s/github/ukrbublik/react-awesome-query-builder/tree/master/packages/sandbox_simple?file=/src/demo/config.jsx)\n\n\nUser-friendly React component to build queries (filters).\n\nInspired by [jQuery QueryBuilder](http://querybuilder.js.org/). \nUsing awesome UI frameworks for widgets: [Ant Design](https://ant.design/), [Material-UI](https://mui.com/), [Bootstrap](https://reactstrap.github.io/). \nNow [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/get-started/web) is also supported!\n\nSee [live demo](https://ukrbublik.github.io/react-awesome-query-builder) \n\n[![Edit in codesandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/github/ukrbublik/react-awesome-query-builder/master?file=%2Fpackages%2Fexamples%2Fdemo%2Findex.tsx)\n[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/ukrbublik/react-awesome-query-builder)\n\n\n* [Features](#features)\n* [Getting started](#getting-started)\n* [Demo apps](#demo-apps)\n* [Usage](#usage)\n  * [Minimal JavaScript example with class component](#minimal-javascript-example-with-class-component)\n  * [Minimal TypeScript example with function component](#minimal-typescript-example-with-function-component)\n* [API](#api)\n  * [Query](#query-)\n  * [Builder](#builder-)\n  * [Utils](#utils)\n    * [Save/load tree](#saveload-tree)\n    * [Validation utils](#validation-utils)\n    * [Export](#export-utils)\n    * [Import](#import-utils)\n    * [Save/load config from server](#saveload-config-from-server)\n  * [Config format](#config-format)\n  * [Validation](#validation)\n* [i18n](#i18n)\n* [Ternary mode](#ternary-mode)\n* [SSR](#ssr)\n  * [ctx](#ctx)\n* [Versions](#versions)\n  * [Changelog](#changelog)\n  * [Migration to 6.5.0](#migration-to-650)\n  * [Migration to 6.4.0](#migration-to-640)\n  * [Migration to 6.3.0](#migration-to-630)\n  * [Migration to 6.2.0](#migration-to-620)\n  * [Migration to 6.0.0](#migration-to-600)\n  * [Migration to 5.2.0](#migration-to-520)\n  * [Migration to 4.9.0](#migration-to-490)\n  * [Migration from v1 to v2](#migration-from-v1-to-v2)\n* [Contributing](#contributing)\n  * [Code Contributing](#code-contributing)\n  * [Financial Contributing](#financial-contributing)\n\n\n### React-Awesome-Query-Builder AI Bot\n\n[React-Awesome-Query-Builder](https://codeparrot.ai/oracle?owner=ukrbublik\u0026repo=react-awesome-query-builder) Bot will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.\n\n\n### Features\n[![Screenshot](https://user-images.githubusercontent.com/3238637/209590656-f32497be-6b74-4837-8414-4f44d78215ae.png)](https://ukrbublik.github.io/react-awesome-query-builder)\n\n* Highly configurable.\n  You can configure fields, types, operators, functions, widgets, behavior settings etc.\n* Fields can have simple type (string, number, bool, date/time, list), custom or complex (structs, arrays)\n* Aggregation is supported (query like \"COUNT OF users WHERE (role == 'Manager' AND department == 'Development') \u003e 5\")\n* Fields can be compared with other fields\n* Comparison operators can be: binary (== != \u003c \u003e), unary ('is null'), 'between' or complex operators like 'proximity'\n* Functions are supported in both LHS and RHS.\n  Functions nesting is supported (function argument can be a function)\n* [Ternary mode](#ternary-mode) (if-then-else)\n* Export to MongoDb, SQL, [JsonLogic](http://jsonlogic.com), [SpEL](https://docs.spring.io/spring-framework/docs/3.2.x/spring-framework-reference/html/expressions.html), ElasticSearch or your custom format\n* Import from [JsonLogic](http://jsonlogic.com), [SpEL](https://docs.spring.io/spring-framework/docs/3.2.x/spring-framework-reference/html/expressions.html), SQL\n* Reordering (drag-n-drop) support for rules and groups of rules\n* Query value and config can be saved/loaded from server\n* Themes: [Ant Design](https://ant.design/), [Material-UI](https://mui.com/), [Bootstrap](https://reactstrap.github.io/), [Fluent UI](https://developer.microsoft.com/en-us/fluentui), vanilla\n  It is possible to use another UI framework of your choice, see [how-to](/CONTRIBUTING.md#other-ui-frameworks)\n* TypeScript support (see [types](/packages/core/modules/index.d.ts) and [demo in TS](/packages/examples))\n\n\n## Getting started\nFrom v6 library is divided into packages:\n- [`@react-awesome-query-builder/core`](/packages/core) - has core functionality to import/export/store query, provides utils\n- [`@react-awesome-query-builder/ui`](/packages/ui) - has core React components like `\u003cQuery\u003e` `\u003cBuilder\u003e` and CSS, provides config with basic (vanilla) widgets\n- [`@react-awesome-query-builder/antd`](/packages/antd) - provides config with [Ant Design](https://ant.design/) widgets\n- [`@react-awesome-query-builder/mui`](/packages/mui) - provides config with [MUI](https://mui.com/) widgets\n- [`@react-awesome-query-builder/material`](/packages/material) - provides config with [Material-UI v4](https://v4.mui.com/) widgets (deprecated)\n- [`@react-awesome-query-builder/bootstrap`](/packages/bootstrap) - provides config with [Bootstrap](https://reactstrap.github.io/) widgets\n- [`@react-awesome-query-builder/fluent`](/packages/fluent) - provides config with [Fluent UI](https://developer.microsoft.com/en-us/fluentui) widgets\n\n```mermaid\ngraph LR;\n  core--\u003eui;\n  core--\u003esql((sql));\n  ui--\u003eantd;\n  ui--\u003emui;\n  ui--\u003ematerial;\n  ui--\u003ebootstrap;\n  ui--\u003efluent;\n```\n\n`ui` re-exports from `core`, other packages re-export from `ui`. \nFor using this library on frontend you need to install and use only `ui` (for basic widgets) or one of framework-specific packages (`antd` / `mui` / `bootstrap` / `fluent`). \n\nFor using this library on server-side (Node.js) you need only `core`. \nThis is useful if you want to pass query value from frontend to backend in JSON format and perform [export](#export-utils) eg. to SQL on server-side for security reasons.\n\nExample of installation if you use [MUI](https://mui.com/):\n```\nnpm i @react-awesome-query-builder/mui --save\n```\n\nNote: We use [pnpm](https://pnpm.io/). If you want to clone this project and run scripts, please [install pnpm](https://pnpm.io/installation):\n```\nnpm install -g pnpm\n```\n\n\nSee [basic usage](#usage) for minimum code example. \n\nSee [API](#api) and [config](#config-format) for documentation. \n\n\n## Demo apps\n\n- [`pnpm start`](/packages/examples) - demo app with hot reload of demo code and local library code, uses TS, uses complex config to demonstrate anvanced usage, uses all supported UI frameworks.\n- [`pnpm sandbox-ts`](/packages/sandbox) - simple demo app, built with Vite, uses TS, uses MUI widgets.\n- [`pnpm sandbox-js`](/packages/sandbox_simple) - simplest demo app, built with Vite, not uses TS, uses vanilla widgets.\n- [`pnpm sandbox-next`](/packages/sandbox_next) - advanced demo app with server side, built with Next.js, uses TS, uses MUI widgets, has API to save/load query value and query config from storage.\n\n\n## Usage\n\n#### Minimal JavaScript example with class component\n```javascript\nimport React, {Component} from 'react';\n\n// \u003e\u003e\u003e\nimport { Utils as QbUtils, Query, Builder, BasicConfig } from '@react-awesome-query-builder/ui';\nimport '@react-awesome-query-builder/ui/css/styles.css';\n// or import '@react-awesome-query-builder/ui/css/compact_styles.css';\nconst InitialConfig = BasicConfig;\n// \u003c\u003c\u003c\n\n// You need to provide your own config. See below 'Config format'\nconst config = {\n  ...InitialConfig,\n  fields: {\n    qty: {\n      label: 'Qty',\n      type: 'number',\n      fieldSettings: {\n        min: 0,\n      },\n      valueSources: ['value'],\n      preferWidgets: ['number'],\n    },\n    price: {\n      label: 'Price',\n      type: 'number',\n      valueSources: ['value'],\n      fieldSettings: {\n        min: 10,\n        max: 100,\n      },\n      preferWidgets: ['slider', 'rangeslider'],\n    },\n    name: {\n      label: 'Name',\n      type: 'text',\n    },\n    color: {\n      label: 'Color',\n      type: 'select',\n      valueSources: ['value'],\n      fieldSettings: {\n        listValues: [\n          { value: 'yellow', title: 'Yellow' },\n          { value: 'green', title: 'Green' },\n          { value: 'orange', title: 'Orange' }\n        ],\n      }\n    },\n    is_promotion: {\n      label: 'Promo?',\n      type: 'boolean',\n      operators: ['equal'],\n      valueSources: ['value'],\n    },\n  }\n};\n\n// You can load query value from your backend storage (for saving see `Query.onChange()`)\nconst queryValue = {\"id\": QbUtils.uuid(), \"type\": \"group\"};\n\n\nclass DemoQueryBuilder extends Component {\n  state = {\n    tree: QbUtils.loadTree(queryValue),\n    config: config\n  };\n  \n  render = () =\u003e (\n    \u003cdiv\u003e\n      \u003cQuery\n        {...config} \n        value={this.state.tree}\n        onChange={this.onChange}\n        renderBuilder={this.renderBuilder}\n      /\u003e\n      {this.renderResult(this.state)}\n    \u003c/div\u003e\n  )\n\n  renderBuilder = (props) =\u003e (\n    \u003cdiv className=\"query-builder-container\" style={{padding: '10px'}}\u003e\n      \u003cdiv className=\"query-builder qb-lite\"\u003e\n        \u003cBuilder {...props} /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n\n  renderResult = ({tree: immutableTree, config}) =\u003e (\n    \u003cdiv className=\"query-builder-result\"\u003e\n      \u003cdiv\u003eQuery string: \u003cpre\u003e{JSON.stringify(QbUtils.queryString(immutableTree, config))}\u003c/pre\u003e\u003c/div\u003e\n      \u003cdiv\u003eMongoDb query: \u003cpre\u003e{JSON.stringify(QbUtils.mongodbFormat(immutableTree, config))}\u003c/pre\u003e\u003c/div\u003e\n      \u003cdiv\u003eSQL where: \u003cpre\u003e{JSON.stringify(QbUtils.sqlFormat(immutableTree, config))}\u003c/pre\u003e\u003c/div\u003e\n      \u003cdiv\u003eJsonLogic: \u003cpre\u003e{JSON.stringify(QbUtils.jsonLogicFormat(immutableTree, config))}\u003c/pre\u003e\u003c/div\u003e\n    \u003c/div\u003e\n  )\n  \n  onChange = (immutableTree, config) =\u003e {\n    // Tip: for better performance you can apply `throttle` - see `packages/examples/src/demo`\n    this.setState({tree: immutableTree, config: config});\n\n    const jsonTree = QbUtils.getTree(immutableTree);\n    console.log(jsonTree);\n    // `jsonTree` can be saved to backend, and later loaded to `queryValue`\n  }\n}\nexport default DemoQueryBuilder;\n```\n\n#### Minimal TypeScript example with function component\n```typescript\nimport React, { useState, useCallback } from \"react\";\n\n// \u003e\u003e\u003e \nimport type { JsonGroup, Config, ImmutableTree, BuilderProps } from '@react-awesome-query-builder/ui';\nimport { Utils as QbUtils, Query, Builder, BasicConfig } from '@react-awesome-query-builder/ui';\nimport '@react-awesome-query-builder/ui/css/styles.css';\n// or import '@react-awesome-query-builder/ui/css/compact_styles.css';\nconst InitialConfig = BasicConfig;\n// \u003c\u003c\u003c\n\n// You need to provide your own config. See below 'Config format'\nconst config: Config = {\n  ...InitialConfig,\n  fields: {\n    qty: {\n      label: \"Qty\",\n      type: \"number\",\n      fieldSettings: {\n        min: 0\n      },\n      valueSources: [\"value\"],\n      preferWidgets: [\"number\"]\n    },\n    price: {\n      label: \"Price\",\n      type: \"number\",\n      valueSources: [\"value\"],\n      fieldSettings: {\n        min: 10,\n        max: 100\n      },\n      preferWidgets: [\"slider\", \"rangeslider\"]\n    },\n    name: {\n      label: 'Name',\n      type: 'text',\n    },\n    color: {\n      label: \"Color\",\n      type: \"select\",\n      valueSources: [\"value\"],\n      fieldSettings: {\n        listValues: [\n          { value: \"yellow\", title: \"Yellow\" },\n          { value: \"green\", title: \"Green\" },\n          { value: \"orange\", title: \"Orange\" }\n        ]\n      }\n    },\n    is_promotion: {\n      label: \"Promo?\",\n      type: \"boolean\",\n      operators: [\"equal\"],\n      valueSources: [\"value\"]\n    }\n  }\n};\n\n// You can load query value from your backend storage (for saving see `Query.onChange()`)\nconst queryValue: JsonGroup = { id: QbUtils.uuid(), type: \"group\" };\n\nconst DemoQueryBuilder: React.FC = () =\u003e {\n  const [state, setState] = useState({\n    tree: QbUtils.loadTree(queryValue),\n    config: config\n  });\n\n  const onChange = useCallback((immutableTree: ImmutableTree, config: Config) =\u003e {\n    // Tip: for better performance you can apply `throttle` - see `packages/examples/src/demo`\n    setState(prevState =\u003e ({ ...prevState, tree: immutableTree, config: config }));\n\n    const jsonTree = QbUtils.getTree(immutableTree);\n    console.log(jsonTree);\n    // `jsonTree` can be saved to backend, and later loaded to `queryValue`\n  }, []);\n\n  const renderBuilder = useCallback((props: BuilderProps) =\u003e (\n    \u003cdiv className=\"query-builder-container\" style={{ padding: \"10px\" }}\u003e\n      \u003cdiv className=\"query-builder qb-lite\"\u003e\n        \u003cBuilder {...props} /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  ), []);\n\n  return (\n    \u003cdiv\u003e\n      \u003cQuery\n        {...config}\n        value={state.tree}\n        onChange={onChange}\n        renderBuilder={renderBuilder}\n      /\u003e\n      \u003cdiv className=\"query-builder-result\"\u003e\n        \u003cdiv\u003e\n          Query string:{\" \"}\n          \u003cpre\u003e\n            {JSON.stringify(QbUtils.queryString(state.tree, state.config))}\n          \u003c/pre\u003e\n        \u003c/div\u003e\n        \u003cdiv\u003e\n          MongoDb query:{\" \"}\n          \u003cpre\u003e\n            {JSON.stringify(QbUtils.mongodbFormat(state.tree, state.config))}\n          \u003c/pre\u003e\n        \u003c/div\u003e\n        \u003cdiv\u003e\n          SQL where:{\" \"}\n          \u003cpre\u003e\n            {JSON.stringify(QbUtils.sqlFormat(state.tree, state.config))}\n          \u003c/pre\u003e\n        \u003c/div\u003e\n        \u003cdiv\u003e\n          JsonLogic:{\" \"}\n          \u003cpre\u003e\n            {JSON.stringify(QbUtils.jsonLogicFormat(state.tree, state.config))}\n          \u003c/pre\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\nexport default DemoQueryBuilder;\n```\n\n\n\n# API\n\n## `\u003cQuery /\u003e`\nProps:\n- `{...config}` - destructured [`CONFIG`](/CONFIG.adoc)\n- `value` - query value in internal [Immutable](https://immutable-js.github.io/immutable-js/) format\n- `onChange` - callback called when query value changes. Params: `value` (in Immutable format), `config`, `actionMeta` (details about action which led to the change, see `ActionMeta` in [`index.d.ts`](/packages/core/modules/index.d.ts)), `actions` (you can use to run actions programmatically, see `Actions` in [`index.d.ts`](/packages/core/modules/index.d.ts)).\n- `onInit` - callback called before initial render, has same arguments as `onChange` (but `actionMeta` is undefined)\n- `renderBuilder` - function to render query builder itself. Takes 1 param `props` you need to pass into `\u003cBuilder {...props} /\u003e`.\n\n*Notes*:\n- Please apply `useCallback` for `onChange` and `renderBuilder` for performance reason\n- If you put query builder component inside [Material-UI](https://github.com/mui-org/material-ui)'s `\u003cDialog /\u003e` or `\u003cPopover /\u003e`, please:\n  - use prop `disableEnforceFocus={true}` for dialog or popver\n  - set css `.MuiPopover-root, .MuiDialog-root { z-index: 900 !important; }` (or 1000 for AntDesign v3)\n- If you put query builder component inside [Fluent-UI](https://developer.microsoft.com/en-us/fluentui)'s `\u003cPanel /\u003e`, please:\n  - set css `.ms-Layer.ms-Layer--fixed.root-119 { z-index: 900 !important; }`\n- `props` arg in `renderBuilder` have `actions` and `dispatch` you can use to run actions programmatically\n- For a list of available actions see `Actions` interface in [`index.d.ts`](/packages/core/modules/index.d.ts). See `runActions()` in [examples](/packages/examples/src/demo/index.tsx) as a demonstration of calling actions programmatically.\n\n## `\u003cBuilder /\u003e`\n\nRender this component only inside `Query.renderBuilder()` like in example above:\n```js\n  renderBuilder = (props) =\u003e (\n    \u003cdiv className=\"query-builder-container\"\u003e\n      \u003cdiv className=\"query-builder qb-lite\"\u003e\n          \u003cBuilder {...props} /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n```\n\nWrapping `\u003cBuilder /\u003e` in `div.query-builder` is **necessary** for drag-n-drop support.  \nOptionally you can add class `.qb-lite` to it for showing action buttons (like delete rule/group, add, etc.) only on hover, which will look cleaner.  \nWrapping in `div.query-builder-container` is necessary for correct drag-n-drop support if you put query builder inside scrollable block.  \n\n## `Utils`\n\n### Save/load tree\n\n  #### `getTree`\n  `Utils.getTree (immutableValue, light = true, children1AsArray = true) -\u003e Object`  \n  Convert query value from internal Immutable format to JS object.  \n  You can use it to save value on backend in `onChange` callback of `\u003cQuery\u003e`.  \n  Tip: Use `light = false` in case if you want to store query value in your state in JS format and pass it as `value` of `\u003cQuery\u003e` after applying `loadTree()` (which is not recommended because of double conversion). See issue [#190](https://github.com/ukrbublik/react-awesome-query-builder/issues/190)\n\n  #### `loadTree`\n  `Utils.loadTree (jsValue) -\u003e Immutable`  \n  Convert query value from JS format to internal Immutable format.  \n  You can use it to load saved value from backend and pass as `value` prop to `\u003cQuery\u003e`.\n\n### Validation utils\n\n  #### `isValidTree`\n  `Utils.isValidTree (immutableValue, config) -\u003e Boolean`  \n  If `showErrorMessage` in config.settings is true, use this method to check if query has validation errors (presented in UI with red text color under the rule).  \n  Note that incomplete rules or empty groups are not counted as validation errors for this function.  \n  If `showErrorMessage` is false, this function will always return true.\n\n  #### `validateTree`\n  `Utils.validateTree (immutableValue, config, options?) -\u003e Array`  \n  Validates immutable query value to check it corresponds to the config and has no parts that are invalid or incomplete.  \n  Returns array of errors *grouped by item in tree*.  \n  Each array element is `{ itemStr, itemPositionStr, errors, path }` (see type [`ValidationItemErrors`](/packages/core/modules/index.d.ts)).  \n\n  To present item for user you can use `itemStr` (string representation of rule eg. `Number \u003e 55`) and `itemPositionStr` (eg. `Rule #4 (index path: 1, 2)`).  \n  Also you can use `path` to get raw item data with `Utils.TreeUtils.getItemByPath(tree, path)` *(advanced)*.  \n\n  `errors` is an array of objects `{ str, key, args, side, delta }` (see type [`ValidationError`](/packages/core/modules/index.d.ts)).  \n  `str` is an error message translated with [i18next.t(key, args)](https://www.i18next.com/overview/api#t) (namespace is `raqbvalidation`).  \n  `side` can be one of `rhs` or `lhs`.  \n  `delta` can be 0 or 1 for `between` operator.  \n\n  You can override/extend translations with:  \n  `Utils.i18n.addResources(\"en\", \"raqbvalidation\", { ...yourTranslations })`  \n  See default [validation translations](/packages/core/modules/i18n/validation/translations.js).  \n  See [i18n for validation](#validation-translations).\n\n  #### `sanitizeTree`\n  `Utils.sanitizeTree (immutableValue, config, options?) -\u003e { fixedTree, fixedErrors, nonFixedErrors }`  \n  Validates and modifies immutable query value to ensure it corresponds to the config and has no parts that are invalid or incomplete.  \n  Invalid rules (eg. if field is not found in config) will always be deleted.  \n  Invalid values (eg. value \u003e max or \u003c min, value not passing `validateValue()` in field config) will be either:\n   - always deleted if `showErrorMessage` in config.settings is false\n   - fixed (if possible) or deleted (if can't fix) if `options.forceFix` is true\n   - marked with error if `showErrorMessage` is true.\n\n  `options` is an object with keys:\n  - `removeEmptyGroups` (default: true) - If group has no children, drop it.\n  - `removeEmptyRules` (default: true) - If rule is empty, drop it.\n  - `removeIncompleteRules` (default: true) - If rule is not completed (eg. value in RHS is empty, or required argument for a function is empty), drop it. Cause it can't be exported (will not be present in result of any [export](#export-utils) function call) so can be treated as useless.\n  - `forceFix` (default: false) - If a rule has validation error(s), fix them if it's possible (eg. if value \u003e max, can be reset to max), if not possible - drop it.\n\n  Returns an object with properties:\n  - `fixedTree` is a fixed immutable tree value \n  - `fixedErrors` is an array of fixed errors grouped by item\n  - `nonFixedErrors` can be present if a `fixedTree` still has validation errors (eg. if `forceFix: false` and there are rules with value \u003e max, or `removeEmptyGroups: false` and there are empty groups). \n  - `allErrors` is an array of all errors (fixed and non-fixed). \n\n  The format of errors in `fixedErrors`, `nonFixedErrors`, `allErrors` is the same as returned from [validateTree](#validateTree).  \n  But error objects per item alongside with `str`, `key`, `args`, `side` have also the following keys:  \n  `fixed` (boolean), `fixedFrom`, `fixedTo`.\n\n### Export utils\n\n  #### `queryString`\n  `Utils.Export.queryString (immutableValue, config, isForDisplay = false) -\u003e String`  \n  Convert query value to custom string representation.  \n  `isForDisplay` = true can be used to make string more \"human readable\".\n\n  #### `mongodbFormat`\n  `Utils.Export.mongodbFormat (immutableValue, config) -\u003e Object`  \n  Convert query value to MongoDb query object.\n\n  #### `sqlFormat`\n  `Utils.Export.sqlFormat (immutableValue, config) -\u003e String`  \n  Convert query value to SQL where string.\n\n  #### `spelFormat`\n  `Utils.Export.spelFormat (immutableValue, config) -\u003e String`  \n  Convert query value to [Spring Expression Language (SpEL)](https://docs.spring.io/spring-framework/docs/3.2.x/spring-framework-reference/html/expressions.html).\n\n  #### `elasticSearchFormat`\n  `Utils.Export.elasticSearchFormat (immutableValue, config) -\u003e Object`  \n  Convert query value to ElasticSearch query object.\n\n  #### `jsonLogicFormat`\n  `Utils.Export.jsonLogicFormat (immutableValue, config) -\u003e {logic, data, errors}`  \n  Convert query value to [JsonLogic](http://jsonlogic.com) format.  \n  If there are no `errors`, `logic` will be rule object and `data` will contain all used fields with null values (\"template\" data).\n\n### Import utils\n\n  #### `loadFromJsonLogic`\n  `Utils.Import.loadFromJsonLogic (jsonLogicObject, config) -\u003e Immutable`  \n  Convert query value from [JsonLogic](http://jsonlogic.com) format to internal Immutable format.\n \n  #### `_loadFromJsonLogic`\n  `Utils.Import._loadFromJsonLogic (jsonLogicObject, config) -\u003e [Immutable, errors]`\n\n  #### `loadFromSpel`\n  `Utils.Import.loadFromSpel (string, config) -\u003e [Immutable, errors]`  \n  Convert query value from [Spring Expression Language (SpEL)](https://docs.spring.io/spring-framework/docs/3.2.x/spring-framework-reference/html/expressions.html) format to internal Immutable format. \n\n  #### `loadFromSql`\n  `SqlUtils.loadFromSql (string, config) -\u003e {tree: Immutable, errors: string[]}`  \n  Convert query value from SQL format to internal Immutable format.  \n  Requires import of `@react-awesome-query-builder/sql`:  \n  `import { SqlUtils } from \"@react-awesome-query-builder/sql\"`\n\n### Save/load config from server\n\n  #### `compressConfig`\n  `Utils.ConfigUtils.compressConfig (config, baseConfig) -\u003e ZipConfig`  \n  Returns compressed config that can be serialized to JSON and saved on server.  \n  `ZipConfig` is a special format that contains only changes agains `baseConfig`.  \n  `baseConfig` is a config you used as a base for constructing `config`, like `InitialConfig` in examples above.  \n  It depends on UI framework you choose - eg. if you use `@react-awesome-query-builder/mui`, please provide `MuiConfig` to `baseConfig`. \n\n  #### `decompressConfig`\n  `Utils.ConfigUtils.decompressConfig (zipConfig, baseConfig, ctx?) -\u003e Config`  \n  Converts `zipConfig` (compressed config you receive from server) to a full config that can be passed to `\u003cQuery /\u003e`.  \n  `baseConfig` is a config to be used as a base for constructing your config, like `InitialConfig` in examples above.  \n  [`ctx`](#ctx) is optional and can contain your custom functions and custom React components used in your config.  \n  If `ctx` is provided in 3rd argument, it will inject it to result config, otherwise will copy from basic config in 2nd argument.  \n  See [SSR](#ssr) for more info.  \n  Note that you should set `config.settings.useConfigCompress = true` in order for this function to work. \n\n\n## Config format\nThis library uses config-driven aproach. \nConfig defines what value types, operators are supported, how they are rendered, imported, exported. \nAt minimum, you need to provide your own set of fields as in [basic usage](#usage).  \nSee [`CONFIG`](/CONFIG.adoc) for full documentation.\n\n\n## Validation\n\nUseful [config settings](/CONFIG.adoc#configsettings) to manage global validation behaviour:\n- `showErrorMessage`: If it's `false`, query builder won't allow user to input incorrect values (like \u003e max or \u003c min or value that doesn't bypass `validateValue()` in field config). If it's `true`, inputs can have invalid values but the appropriate error message will be shown under the rule.\n- `removeIncompleteRulesOnLoad`, `removeEmptyRulesOnLoad`, `removeEmptyGroupsOnLoad`, `removeInvalidMultiSelectValuesOnLoad`: during initial validation of `value` prop passed to `\u003cQuery\u003e`.\n\nUseful [field config settings](/CONFIG.adoc#configfields) to manage validation behaviour per field:\n- `fieldSettings.min`, `fieldSettings.max` for numeric fields\n- `fieldSettings.maxLength` for string fields\n- `fieldSettings.validateValue` - Custom JS function to validate value and return null (if value is valid) or object `{error, fixedValue?}`. \n  `error` can be a string or an object `{key, args}` to use [i18n](#validation-translations)\n- Note that functions and their arguments can also have `fieldSettings`\n\nUse [`Utils.sanitizeTree()`](#sanitizetree) to perform validation on tree value and return validation errors and fixed tree value.\nSee the list of [validation utils](#validation-utils).\n\nSee [i18n for validation](#validation-translations).\n\n\n## i18n\n:construction:\n\nThis library uses [i18next](https://www.i18next.com/overview/getting-started) for translations.  \n\n### Validation translations\n\n  Namespace: `raqbvalidation`.\n  [Default translations resource](/packages/core/modules/i18n/validation/translations.js)\n\nExample of overriding translations for validation error messages:\n```js\nUtils.i18n.addResources(\"en\", \"raqbvalidation\", {\n  \"INCOMPLETE_LHS\": \"Incomplete left-hand side\",\n  \"INCOMPLETE_RHS\": \"Incomplete right-hand side\",\n});\n```\n\nExample of using custom translations in `validateValue` in config:\n```js\nUtils.i18n.addResources(\"en\", \"mynamespace\", {\n  \"INVALID_SLIDER_VALUE\": \"Invalid slider value {{val}}\",\n});\n\nconst config = {\n  ...MuiConfig,\n  fields: {\n    slider: {\n      type: \"number\",\n      preferWidgets: [\"slider\"],\n      fieldSettings: {\n        validateValue: (val) =\u003e {\n          return (val \u003c 50 ? null : {\n            error: {\n              // use `key` and `args` for i18next.t()\n              // `key` should have your namespace prefixed with \":\"\n              key: \"mynamespace:INVALID_SLIDER_VALUE\",\n              args: { val }\n            },\n            fixedValue: 49\n          });\n        },\n      }\n    }\n  }\n};\n\n// then use \u003cQuery {...config} /\u003e\n```\n\nSee [example](/packages/examples/src/demo/index.tsx).\n\n\n## Ternary mode\n\nFirst you need to configure `caseValueField` in `config.settings`. Example to use tags as case values:\n```js\nconst config: Config = {\n  ...InitialConfig,\n  fields,\n  settings: {\n    ...InitialConfig.settings,\n    caseValueField: {\n      type: \"select\",\n      valueSources: [\"value\"],\n      fieldSettings: {\n        listValues: [\n          { value: \"tag1\", title: \"Tag #1\" },\n          { value: \"tag2\", title: \"Tag #2\" },\n        ],\n      },\n      mainWidgetProps: {\n        valueLabel: \"Then\",\n        valuePlaceholder: \"Then\",\n      },\n    },\n    canRegroupCases: true,\n    maxNumberOfCases: 10,\n  }\n};\n```\n\nYou can use other type/widget (including your custom one) to render case values.  \nAlso you can use function (action) by specifying `valueSources: [\"func\"]` in `caseValueField`. \nYou have to add [funcs](/CONFIG.adoc#configfuncs) to the config (with `returnType` equals `type` in case value field).\n\nLoad empty tree in ternary mode:\n```js\nimport { Utils as QbUtils, JsonSwitchGroup } from '@react-awesome-query-builder/ui';\nconst emptyJson: JsonSwitchGroup = { id: QbUtils.uuid(), type: \"switch_group\", };\nconst tree = QbUtils.loadTree(emptyJson);\n```\n\nSee [example](/packages/examples/src/demo_switch/index.tsx)\n\n![Screenshot](https://github.com/ukrbublik/react-awesome-query-builder/assets/3238637/4bf87da5-47f2-4a64-b1be-8924a62f96ad)\n\n\n## SSR\nYou can save and load config from server with help of utils:\n- [Utils.ConfigUtils.compressConfig()](#compressconfig)\n- [Utils.ConfigUtils.decompressConfig()](#decompressconfig)\n\nYou need these utils because you can't just send config *as-is* to server, as it contains functions that can't be serialized to JSON.  \nNote that you need to set `config.settings.useConfigCompress = true` to enable this feature.  \n\nTo put it simple:\n- `ZipConfig` type is a JSON that contains only changes against basic config (differences). At minimum it contains your `fields`. It does not contain [`ctx`](#ctx).\n- `Utils.ConfigUtils.decompressConfig()` will merge `ZipConfig` to basic config (and add `ctx` if passed). \n\nSee [sandbox_next demo app](/packages/sandbox_next) that demonstrates server-side features. \n\n### ctx\nConfig context is an obligatory part of config starting from version 6.3.0  \nIt is a collection of functions and React components to be used in other parts of config by reference to `ctx` rather than by reference to imported modules.  \nThe purpose of `ctx` is to isolate non-serializable part of config.  \nSee [config.ctx](/CONFIG.adoc#configctx).  \n\n\n## Versions\n\nVersion 5 is backward-compatible with 2-4. \nFrom version 6 library is divided into [packages](/packages). \nIt's recommended to update your version to 6.x. You just need to change your imports, see [Migration to 6.0.0](#migration-to-600)\n\n### Supported versions\n| Version | Supported          |\n| ------- | ------------------ |\n| 6.x     | :white_check_mark: |\n| 5.x     | :heavy_check_mark: |\n| 4.x     | :warning:          |\n| 3.x     | :x:                |\n| 2.x     | :x:                |\n| 1.x     | :x:                |\n| 0.x     | :x:                |\n\n### Changelog\nSee [`CHANGELOG`](/CHANGELOG.md)\n\n### Migration to 6.5.0\n\nValidation API has been changed:\n- `Utils.validateTree()` now returns array of validation errors intead of boolean\n- `Utils.checkTree()` and `Utils.validateAndFixTree()` are deprecated (and removed type defs). Use `Utils.sanitizeTree().fixedTree` instead\n\n### Migration to 6.4.0\n\nIf you want to enable functions in LHS, please add to `config.settings`:\n```js\nfieldSources: [\"field\", \"func\"],\n```\n\n### Migration to 6.3.0\n\nNow config has new [`ctx`](#ctx) property. Make sure you add it to your config.\n\nTypically you just need to copy it from basic config.\nSo if you create config like this, you don't need to make any changes:\n```js\nimport { MuiConfig } from \"@react-awesome-query-builder/mui\";\nconst config = {\n  ...MuiConfig,\n  fields: {\n    // your fields\n  },\n};\n```\n\nBut if you create config without destructuring of basic config, please add `ctx`:\n```js\nimport { MuiConfig } from \"@react-awesome-query-builder/mui\";\n\nconst config = {\n  ctx: MuiConfig.ctx, // needs to be added for 6.3.0+\n  conjunctions,\n  operators,\n  widgets,\n  types,\n  settings,\n  fields,\n  funcs\n};\nexport default config;\n```\n\n\n**Note:** If you override `render*` function(s) in config setttings and call original `render*` function from imported config, be aware that you should pass `ctx` as 2nd param.\nExample:\n```js\nconfig = {\n  ...MuiConfig,\n  settings: {\n    ...MuiConfig.settings,\n    renderField: (props) =\u003e (\n      \u003cWithTheme theme={theme}\u003e\n        { MuiConfig.settings.renderField?.(props, MuiConfig.ctx) }  // please pass `ctx`\n      \u003c/WithTheme\u003e\n    ),\n  }\n};\n```\nSee issue [#996](https://github.com/ukrbublik/react-awesome-query-builder/issues/996)\n\n\n### Migration to 6.2.0\n\nIf you use `treeselect` or `treemultiselect` type (for AntDesign), please rename `listValues` to `treeValues`\n\n### Migration to 6.0.0\n\nFrom version 6 library is divided into [packages](/packages). \nPlease remove package `react-awesome-query-builder` and install one of:\n- [`@react-awesome-query-builder/ui`](/packages/ui)\n- [`@react-awesome-query-builder/antd`](/packages/antd)\n- [`@react-awesome-query-builder/bootstrap`](/packages/bootstrap)\n- [`@react-awesome-query-builder/mui`](/packages/mui)\n- [`@react-awesome-query-builder/material`](/packages/material) (deprecated)\n- [`@react-awesome-query-builder/fluent`](/packages/fluent)\n\nLibrary code is backward-compatible with version 2-5. \nYou just need to change your imports. \n\n```diff\n- import { Utils, Export, Import, BasicFuncs } from 'react-awesome-query-builder';\n+ import { Utils, Export, Import, BasicFuncs } from '@react-awesome-query-builder/ui';\n\n- import { Query, Builder, BasicConfig, Widgets, Operators } from 'react-awesome-query-builder';\n+ import { Query, Builder, BasicConfig, VanillaWidgets, CustomOperators } from '@react-awesome-query-builder/ui';\n\n- import AntdConfig from 'react-awesome-query-builder/lib/config/antd';\n+ import {AntdConfig} from '@react-awesome-query-builder/antd';\n- import MuiConfig from 'react-awesome-query-builder/lib/config/mui';\n+ import {MuiConfig} from '@react-awesome-query-builder/mui';\n- import MaterialConfig from 'react-awesome-query-builder/lib/config/material';\n+ import {MaterialConfig} from '@react-awesome-query-builder/material';\n- import BootstrapConfig from 'react-awesome-query-builder/lib/config/bootstrap';\n+ import {BootstrapConfig} from '@react-awesome-query-builder/bootstrap';\n\n- import 'react-awesome-query-builder/lib/css/styles.css';\n+ import '@react-awesome-query-builder/ui/css/styles.css';\n- import 'react-awesome-query-builder/lib/css/compact_styles.css';\n+ import '@react-awesome-query-builder/ui/css/compact_styles.css'; // instead of styles.css for more compact look\n```\n\nNote that you should import all types and values from a single package.\nFor example, `@react-awesome-query-builder/antd` if you use AntDesign - it inherits `core` and `ui`:\n```js\nimport {Utils, Query, Builder, AntdConfig} from '@react-awesome-query-builder/antd';\n```\nYou don't need to install and import `ui` and `core` packages in this case, just use `antd`.  \nSame for styles - please import from `antd` package:\n```js\nimport '@react-awesome-query-builder/antd/css/styles.css';\n```\ninstead of\n```js\nimport '@react-awesome-query-builder/ui/css/styles.css';\n```\n\nIf you use vanilla widgets, please install, import and use only `@react-awesome-query-builder/ui` (it inherits `core`). \n\nOne more thing, if you use Bootstrap widgets, now you need to explicitly import CSS:\n```js\nimport \"bootstrap/dist/css/bootstrap.min.css\";\n```\n\n### Migration to 5.2.0\nBreaking change: `children1` is now an indexed array (instead of object) in result of `Utils.getTree()` to preserve items order.  \nBefore:\n```js\nchildren1: {\n  '\u003cid1\u003e': { type: 'rule', properties: ... },\n  '\u003cid2\u003e': { type: 'rule', properties: ... }\n}\n```\nAfter:\n```js\nchildren1: [\n  { id: '\u003cid1\u003e', type: 'rule', properties: ... },\n  { id: '\u003cid2\u003e', type: 'rule', properties: ... },\n]\n```\n`Utils.loadTree()` is backward comatible with children1 being array or object.  \nBut if you rely on previous format (maybe do post-processing of `getTree()` result), please use `Utils.getTree(tree, true, false)` - it will behave same as before this change.  \n\nAnother breaking change: `removeIncompleteRulesOnLoad` and `removeEmptyGroupsOnLoad` now default to `true`, set them to `false` in your `settings` to preserve the behaviour before 5.2.0.\n\n### Migration to 4.9.0\nVersion 4.9.0 has a breaking change for operators `is_empty` and `is_not_empty`.  \nNow these operators can be used for text type only (for other types they will be auto converted to `is_null`/`is_not_null` during loading of query value created with previous versions).  \nChanged meaning of `is_empty` - now it's just strict comparing with empty string.  \nBefore change the meaning was similar to `is_null`.  \nIf you used `is_empty` for text types with intention of comparing with null, please replace `is_empty` -\u003e `is_null`, `is_not_empty` -\u003e `is_not_null` in saved query values.  \nIf you used JsonLogic for saving, you need to replace `{\"!\": {\"var\": \"your_field\"}}` -\u003e `{\"==\": [{\"var\": \"your_field\"}, null]}` and `{\"!!\": {\"var\": \"your_field\"}}` -\u003e `{\"!=\": [{\"var\": \"your_field\"}, null]}`.\n\n### Migration from v1 to v2\nFrom v2.0 of this lib AntDesign is now optional (peer) dependency, so you need to explicitly include `antd` (4.x) in `package.json` of your project if you want to use AntDesign UI.  \nPlease import `AntdConfig` from `react-awesome-query-builder/lib/config/antd` and use it as base for your config (see below in [usage](#usage)).  \nAlternatively you can use `BasicConfig` for simple vanilla UI, which is by default.  \nSupport of other UI frameworks (like Bootstrap) are planned for future, see [Other UI frameworks](CONTRIBUTING.md#other-ui-frameworks).\n\n\n\n## Contributing\n\n### Code Contributing\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n\u003ca href=\"https://github.com/ukrbublik/react-awesome-query-builder/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/react-awesome-query-builder/contributors.svg?width=890\u0026button=false\" /\u003e\u003c/a\u003e\n\n### Financial Contributing\n\nBecome a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/react-awesome-query-builder/contribute)]\n\nIf you mention in an GitHub issue that you are a sponsor, we will prioritize helping you.\n\nAs a sponsor you can ask to implement a feature that is not in a todo list or motivate for faster implementation.\n\n#### Individuals\n\n\u003ca href=\"https://opencollective.com/react-awesome-query-builder\"\u003e\u003cimg src=\"https://opencollective.com/react-awesome-query-builder/individuals.svg?width=890\"\u003e\u003c/a\u003e\n\n#### Organizations\n\nSupport this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/react-awesome-query-builder/contribute)]\n\n\u003ca href=\"https://opencollective.com/react-awesome-query-builder/organization/0/website\"\u003e\u003cimg src=\"https://opencollective.com/react-awesome-query-builder/organization/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-awesome-query-builder/organization/1/website\"\u003e\u003cimg src=\"https://opencollective.com/react-awesome-query-builder/organization/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-awesome-query-builder/organization/2/website\"\u003e\u003cimg src=\"https://opencollective.com/react-awesome-query-builder/organization/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-awesome-query-builder/organization/3/website\"\u003e\u003cimg src=\"https://opencollective.com/react-awesome-query-builder/organization/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-awesome-query-builder/organization/4/website\"\u003e\u003cimg src=\"https://opencollective.com/react-awesome-query-builder/organization/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-awesome-query-builder/organization/5/website\"\u003e\u003cimg src=\"https://opencollective.com/react-awesome-query-builder/organization/5/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-awesome-query-builder/organization/6/website\"\u003e\u003cimg src=\"https://opencollective.com/react-awesome-query-builder/organization/6/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-awesome-query-builder/organization/7/website\"\u003e\u003cimg src=\"https://opencollective.com/react-awesome-query-builder/organization/7/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-awesome-query-builder/organization/8/website\"\u003e\u003cimg src=\"https://opencollective.com/react-awesome-query-builder/organization/8/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-awesome-query-builder/organization/9/website\"\u003e\u003cimg src=\"https://opencollective.com/react-awesome-query-builder/organization/9/avatar.svg\"\u003e\u003c/a\u003e\n\n\n\n## License\nMIT. See also `LICENSE.txt`\n\nForked from [https://github.com/fubhy/react-query-builder](https://github.com/fubhy/react-query-builder)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fukrbublik%2Freact-awesome-query-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fukrbublik%2Freact-awesome-query-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fukrbublik%2Freact-awesome-query-builder/lists"}