{"library":"react-querybuilder","title":"React Query Builder Component","description":"React Query Builder is a highly customizable React component designed for constructing complex queries and filters dynamically. It currently maintains a stable version of 8.15.0, with a release cadence that includes frequent patch releases for bug fixes and security updates, alongside regular minor version updates introducing new features and compatibility improvements. Key differentiators include its extensive customization options, first-class support for integration with popular UI libraries like Ant Design, Bootstrap, Chakra UI, and Fluent UI via dedicated compatibility packages, and a comprehensive suite of utility functions for importing and exporting queries to various formats, including SQL, MongoDB, and JSON. The library focuses on providing a flexible and robust solution for building rule-based query interfaces in React applications.","language":"javascript","status":"active","last_verified":"Wed Apr 22","install":{"commands":["npm install react-querybuilder"],"cli":null},"imports":["import { QueryBuilder } from 'react-querybuilder';","import type { RuleGroupType } from 'react-querybuilder';","import type { Field } from 'react-querybuilder';","import { createReactDnDAdapter } from '@react-querybuilder/dnd';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { useState } from 'react';\nimport { Field, QueryBuilder, RuleGroupType } from 'react-querybuilder';\nimport 'react-querybuilder/dist/query-builder.css';\n\nconst fields: Field[] = [\n  { name: 'firstName', label: 'First Name', placeholder: 'e.g. John' },\n  { name: 'lastName', label: 'Last Name', placeholder: 'e.g. Doe' },\n  { name: 'age', label: 'Age', inputType: 'number', placeholder: 'e.g. 30' },\n  { name: 'address', label: 'Address', placeholder: 'e.g. 123 Main St' },\n  { name: 'phone', label: 'Phone', placeholder: 'e.g. 555-1234' },\n  { name: 'email', label: 'Email', validator: ({ value }) => /^[^@]+@[^@]+/.test(value), placeholder: 'e.g. user@example.com' },\n  { name: 'isDev', label: 'Is a Developer?', valueEditorType: 'checkbox', defaultValue: false },\n];\n\nconst initialQuery: RuleGroupType = {\n  combinator: 'and',\n  rules: [\n    { field: 'age', operator: '>', value: '25' },\n    { field: 'isDev', operator: '=', value: true }\n  ],\n};\n\nexport const App = () => {\n  const [query, setQuery] = useState(initialQuery);\n\n  return (\n    <div>\n      <h2>React Query Builder Example</h2>\n      <QueryBuilder\n        fields={fields}\n        defaultQuery={query}\n        onQueryChange={setQuery}\n        showCombineatorsOnLoad={true}\n      />\n      <div style={{ marginTop: '20px' }}>\n        <h3>Current Query State:</h3>\n        <pre>{JSON.stringify(query, null, 2)}</pre>\n      </div>\n    </div>\n  );\n};\n","lang":"typescript","description":"This example demonstrates how to set up a basic QueryBuilder component with predefined fields, an initial query, and state management using React hooks. It also shows the generated query structure.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}