open-index/open-npm huggingface dataset:
npm package: @react-querybuilder/antd
Description: Custom Ant Design components for react-querybuilder
Latest version: 8.14.4

## @react-querybuilder/antd

Official [react-querybuilder](https://npmjs.com/package/react-querybuilder) compatibility package for [Ant Design](https://ant.design/).

- [Demo](https://react-querybuilder.js.org/demo/antd)
- [Full documentation](https://react-querybuilder.js.org/)
- [CodeSandbox](https://react-querybuilder.js.org/sandbox?t=antd) / [StackBlitz](https://react-querybuilder.js.org/sandbox?p=stackblitz&t=antd) example projects

![Screenshot](../../_assets/screenshot-antd.png)

## Installation

```bash
npm i react-querybuilder @react-querybuilder/antd @ant-design/icons antd
# OR yarn add / pnpm add / bun add
```

## Usage

To configure the query builder to use Ant Design-compatible components, place `QueryBuilderAntD` above `QueryBuilder` in the component hierarchy.

```tsx
import { QueryBuilderAntD } from '@react-querybuilder/antd';
import { useState } from 'react';
import { type Field, QueryBuilder, type RuleGroupType } from 'react-querybuilder';

const fields: Field[] = [
  { name: 'firstName', label: 'First Name' },
  { name: 'lastName', label: 'Last Name' },
];

export function App() {
  const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });

  return (
    <QueryBuilderAntD>
      <QueryBuilder fields={fields} defaultQuery={query} onQueryChange={setQuery} />
    </QueryBuilderAntD>
  );
}
```

> [!NOTE]
>
> You may also want to reduce the width of the value editor component (which is 100% by default) with the following CSS rule.
>
> ```css
> .queryBuilder .ant-input {
>   width: auto;
> }
> ```

`QueryBuilderAntD` is a React context provider that assigns the following props to all descendant `QueryBuilder` elements. The props can be overridden on the `QueryBuilder` or used directly without the context provider.

| Export                | `QueryBuilder` prop             |
| --------------------- | ------------------------------- |
| `antdControlElements` | `controlElements`               |
| `antdTranslations`    | `translations`                  |
| `AntDActionElement`   | `controlElements.actionElement` |
| `AntDDragHandle`      | `controlElements.dragHandle`    |
| `AntDNotToggle`       | `controlElements.notToggle`     |
| `AntDShiftActions`    | `controlElements.shiftActions`  |
| `AntDValueEditor`     | `controlElements.valueEditor`   |
| `AntDValueSelector`   | `controlElements.valueSelector` |

> [!TIP]
>
> By default, this package uses icons from `@ant-design/icons` for button labels. To reset button labels to their default strings, use `defaultTranslations` from `react-querybuilder`.
>
> ```tsx
> <QueryBuilderAntD translations={defaultTranslations}>
> ```
npm package: @react-querybuilder/bootstrap
Description: Custom Bootstrap components for react-querybuilder
Latest version: 8.14.4

## @react-querybuilder/bootstrap

Official [react-querybuilder](https://npmjs.com/package/react-querybuilder) compatibility package for [Bootstrap](https://getbootstrap.com/).

- [Demo](https://react-querybuilder.js.org/demo/bootstrap)
- [Full documentation](https://react-querybuilder.js.org/)
- [CodeSandbox](https://react-querybuilder.js.org/sandbox?t=bootstrap) / [StackBlitz](https://react-querybuilder.js.org/sandbox?p=stackblitz&t=bootstrap) example projects

![Screenshot](../../_assets/screenshot-bootstrap.png)

## Installation

```bash
npm i react-querybuilder @react-querybuilder/bootstrap bootstrap bootstrap-icons
# OR yarn add / pnpm add / bun add
```

## Usage

To configure the query builder to use Bootstrap-compatible components, place `QueryBuilderBootstrap` above `QueryBuilder` in the component hierarchy.

```tsx
import { QueryBuilderBootstrap } from '@react-querybuilder/bootstrap';
import 'bootstrap-icons/font/bootstrap-icons.scss';
import 'bootstrap/scss/bootstrap.scss';
import { useState } from 'react';
import { type Field, QueryBuilder, type RuleGroupType } from 'react-querybuilder';

const fields: Field[] = [
  { name: 'firstName', label: 'First Name' },
  { name: 'lastName', label: 'Last Name' },
];

export function App() {
  const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });

  return (
    <QueryBuilderBootstrap>
      <QueryBuilder fields={fields} defaultQuery={query} onQueryChange={setQuery} />
    </QueryBuilderBootstrap>
  );
}
```

> [!NOTE]
>
> Some additional styling may be necessary. We recommend the following:
>
> ```css
> .queryBuilder .form-control,
> .queryBuilder .form-select {
>   display: inline-block;
>   width: auto;
> }
> ```

`QueryBuilderBootstrap` is a React context provider that assigns the following props to all descendant `QueryBuilder` elements. The props can be overridden on the `QueryBuilder` or used directly without the context provider.

| Export                       | `QueryBuilder` prop           |
| ---------------------------- | ----------------------------- |
| `bootstrapControlClassnames` | `controlClassnames`           |
| `bootstrapControlElements`   | `controlElements`             |
| `bootstrapTranslations`      | `translations`                |
| `BootstrapNotToggle`         | `controlElements.notToggle`   |
| `BootstrapValueEditor`       | `controlElements.valueEditor` |

> [!TIP]
>
> By default, this package uses icons from `bootstrap-icons` for button labels. To reset button labels to their default strings, use `defaultTranslations` from `react-querybuilder`.
>
> ```tsx
> <QueryBuilderBootstrap translations={defaultTranslations}>
> ```
npm package: @react-querybuilder/bulma
Description: Custom Bulma components for react-querybuilder
Latest version: 8.14.4

## @react-querybuilder/bulma

Official [react-querybuilder](https://npmjs.com/package/react-querybuilder) compatibility package for [Bulma](https://bulma.io/).

- [Demo](https://react-querybuilder.js.org/demo/bulma)
- [Full documentation](https://react-querybuilder.js.org/)
- [CodeSandbox](https://react-querybuilder.js.org/sandbox?t=bulma) / [StackBlitz](https://react-querybuilder.js.org/sandbox?p=stackblitz&t=bulma) example projects

![Screenshot](../../_assets/screenshot-bulma.png)

## Installation

```bash
npm i react-querybuilder @react-querybuilder/bulma bulma
# OR yarn add / pnpm add / bun add
```

## Usage

To configure the query builder to use Bulma-compatible components, place `QueryBuilderBulma` above `QueryBuilder` in the component hierarchy.

```tsx
import { QueryBuilderBulma } from '@react-querybuilder/bulma';
import { useState } from 'react';
import { type Field, QueryBuilder, type RuleGroupType } from 'react-querybuilder';

const fields: Field[] = [
  { name: 'firstName', label: 'First Name' },
  { name: 'lastName', label: 'Last Name' },
];

export function App() {
  const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });

  return (
    <QueryBuilderBulma>
      <QueryBuilder fields={fields} defaultQuery={query} onQueryChange={setQuery} />
    </QueryBuilderBulma>
  );
}
```

> [!NOTE]
>
> Some additional styling may be necessary. We recommend the following:
>
> ```css
> .queryBuilder .input {
>   width: auto;
> }
> ```

`QueryBuilderBulma` is a React context provider that assigns the following props to all descendant `QueryBuilder` elements. The props can be overridden on the `QueryBuilder` or used directly without the context provider.

| Export                   | `QueryBuilder` prop             |
| ------------------------ | ------------------------------- |
| `bulmaControlClassnames` | `controlClassnames`             |
| `bulmaControlElements`   | `controlElements`               |
| `BulmaNotToggle`         | `controlElements.notToggle`     |
| `BulmaValueEditor`       | `controlElements.valueEditor`   |
| `BulmaValueSelector`     | `controlElements.valueSelector` |
npm package: @react-querybuilder/core
Description: React Query Builder component for constructing queries and filters, with utilities for executing them in various database and evaluation contexts
Latest version: 8.14.4

# @react-querybuilder/core

Core non-React utilities for `react-querybuilder` and associated packages - types, query processing, validation, and formatters.

[Full documentation](https://react-querybuilder.js.org/)

## Basic usage

`react-querybuilder` re-exports everything from this package, so you normally won't need to install `@react-querybuilder/core` by itself.

```bash
npm i @react-querybuilder/core
# OR yarn add / pnpm add / bun add
```

### Export

To [export queries](https://react-querybuilder.js.org/docs/utils/export) as a SQL `WHERE` clause, MongoDB query object, or one of several other formats, use `formatQuery`.

```ts
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](https://react-querybuilder.js.org/docs/utils/import) use `parseSQL`, `parseMongoDB`, `parseJsonLogic`, `parseJSONata`, `parseCEL`, or `parseSpEL` depending on the source.

```ts
// 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",
    },
  ],
}
*/
```

The `parse*` functions must be imported from a sub-path, like this:

```js
import { parseCEL } from '@react-querybuilder/core/parseCEL';
import { parseJSONata } from '@react-querybuilder/core/parseJSONata';
import { parseJsonLogic } from '@react-querybuilder/core/parseJsonLogic';
import { parseMongoDB } from '@react-querybuilder/core/parseMongoDB';
import { parseSpEL } from '@react-querybuilder/core/parseSpEL';
import { parseSQL } from '@react-querybuilder/core/parseSQL';
```
npm package: @react-querybuilder/ctx
Description: React Query Builder context
Latest version: 6.2.0

## @react-querybuilder/ctx

React context provider for [react-querybuilder](https://npmjs.com/package/react-querybuilder).

This package does not need to be installed independently.

[Full documentation](https://react-querybuilder.js.org/)

[Demo](https://react-querybuilder.js.org/demo)
npm package: @react-querybuilder/datetime
Description: Date/time features for react-querybuilder
Latest version: 8.14.4

## @react-querybuilder/datetime

Augments [react-querybuilder](https://npmjs.com/package/react-querybuilder) with enhanced date/time functionality.

To see this in action, check out the [`react-querybuilder` demo](https://react-querybuilder.js.org/demo#datetime=true) with the "date/time" option enabled.

**[Full documentation](https://react-querybuilder.js.org/docs/datetime)**

<!-- ![Screenshot](../../_assets/screenshot.png) -->

## Installation

```bash
npm i react-querybuilder @react-querybuilder/datetime
# OR yarn add / pnpm add / bun add
```

## Usage

<!--
To enable the date and time functionality of a query builder, nest the `QueryBuilder` element under `QueryBuilderDateTime`.

```tsx
import { QueryBuilderDateTime } from '@react-querybuilder/datetime';
import { useState } from 'react';
import { QueryBuilder, RuleGroupType } from 'react-querybuilder';

const fields = [
  { name: 'firstName', label: 'First Name' },
  { name: 'lastName', label: 'Last Name' },
];

const App = () => {
  const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });

  return (
    <QueryBuilderDateTime>
      <QueryBuilder fields={fields} defaultQuery={query} onQueryChange={setQuery} />
    </QueryBuilderDateTime>
  );
};
```
-->

To add date/time functionality to `formatQuery`, import a rule processor from `@react-querybuilder/datetime/dayjs`, `@react-querybuilder/datetime/date-fns`, or `@react-querybuilder/datetime/luxon`—depending on which library you wish to use or are already using—and pass it to the `ruleProcessor` option.

```ts
import { formatQuery } from 'react-querybuilder';
import {
  datetimeRuleProcessorMongoDBQuery,
  datetimeRuleProcessorSQL,
} from '@react-querybuilder/datetime/dayjs';

// SQL
formatQuery(query, { preset: 'postgresql', fields, ruleProcessor: datetimeRuleProcessorSQL });

// MongoDB
formatQuery(query, {
  format: 'mongodb_query',
  fields,
  ruleProcessor: datetimeRuleProcessorMongoDBQuery,
});
```

The date/time rule processors will fallback to using the default rule processors if the rule's field configuration does not have a `datatype` value of "date", "datetime", "datetimeoffset", or "timestamp", or if the `operator` is specific to string comparisons ("contains", "beginsWith", "endsWith", etc.). You can provide a custom `isDateField` function to override this behavior through the `context` option.

<!-- ## Notes -->
npm package: @react-querybuilder/drizzle
Description: Drizzle ORM integration for React Query Builder
Latest version: 8.14.4

## @react-querybuilder/drizzle

Augments [react-querybuilder](https://npmjs.com/package/react-querybuilder) with Drizzle ORM integration.

**[Full documentation](https://react-querybuilder.js.org/docs/utils/export#drizzle-orm)**

> [!TIP]
>
> This package is unnecessary, and only supports Drizzle's [query builder API](https://orm.drizzle.team/docs/select) (like `db.select().from(table).where(...)`) anyway.

## Recommended alternatives

For Drizzle's [relational queries API](https://orm.drizzle.team/docs/rqb), use `formatQuery` from `react-querybuilder` with the "drizzle" format. Assign the result to the `where` property of `.findMany()` or a related function, like so:

```ts
import { formatQuery } from 'react-querybuilder/formatQuery';
const where = formatQuery(query, 'drizzle');
const results = db.query.myTable.findMany({ where });
```

For Drizzle's [query builder API](https://orm.drizzle.team/docs/rqb), use the "drizzle" format in the same way as above and then pass a table definition and Drizzle operators into the generated function. Pass the result of _that_ call to `.where()`, like so:

```ts
import { getOperators } from 'drizzle-orm';
import { drizzle } from 'drizzle-orm/bun-sqlite';
import { sqliteTable, text } from 'drizzle-orm/sqlite-core';
import { formatQuery } from 'react-querybuilder/formatQuery';

const db = drizzle(process.env.DB_FILE_NAME!);
const table = sqliteTable('musicians', {
  firstName: text(),
  lastName: text(),
});

const whereFn = formatQuery(query, 'drizzle');
const whereObj = whereFn(table, getOperators());
const results = db.select().from(table).where(whereObj);
```

## Installation

```bash
npm i react-querybuilder @react-querybuilder/drizzle
# OR yarn add / pnpm add / bun add
```

## Usage

To produce a Drizzle query based on a React Query Builder query object, first generate a rule group processor with `generateDrizzleRuleGroupProcessor` using your table config (or a plain object mapping `field` names to Drizzle `Column`s). Then run `formatQuery`, assigning your rule group processor as `ruleGroupProcessor`.

```ts
import { formatQuery } from 'react-querybuilder';
import { generateDrizzleRuleGroupProcessor } from '@react-querybuilder/drizzle';
import { drizzle } from 'drizzle-orm/bun-sqlite';
import { sqliteTable } from 'drizzle-orm/sqlite-core';
import { fields } from './fields';

const db = drizzle(process.env.DB_FILE_NAME!);

const table = sqliteTable('table', {
  firstName: text(),
  lastName: text(),
});

const ruleGroupProcessor = generateDrizzleRuleGroupProcessor(table);

const sqlWhere = formatQuery(query, { fields, ruleGroupProcessor });

const results = db.select().from(table).where(sqlWhere);
```
npm package: @react-querybuilder/fluent
Description: Custom Fluent UI components for react-querybuilder
Latest version: 8.14.4

## @react-querybuilder/fluent

Official [react-querybuilder](https://npmjs.com/package/react-querybuilder) compatibility package for [Fluent UI](https://github.com/microsoft/fluentui).

- [Demo](https://react-querybuilder.js.org/demo/fluent)
- [Full documentation](https://react-querybuilder.js.org/)
- [CodeSandbox](https://react-querybuilder.js.org/sandbox?t=fluent) / [StackBlitz](https://react-querybuilder.js.org/sandbox?p=stackblitz&t=fluent) example projects

![Screenshot](../../_assets/screenshot-fluent.png)

## Installation

```bash
npm i react-querybuilder @react-querybuilder/fluent @fluentui/react-components @fluentui/react-icons-mdl2
# OR yarn add / pnpm add / bun add
```

## Usage

To configure the query builder to use Fluent-compatible components, place `QueryBuilderFluent` above `QueryBuilder` and beneath `FluentProvider` in the component hierarchy.

```tsx
import { FluentProvider, webLightTheme } from '@fluentui/react-components';
import { QueryBuilderFluent } from '@react-querybuilder/fluent';
import { useState } from 'react';
import { type Field, QueryBuilder, type RuleGroupType } from 'react-querybuilder';

const fields: Field[] = [
  { name: 'firstName', label: 'First Name' },
  { name: 'lastName', label: 'Last Name' },
];

export function App() {
  const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });

  return (
    <FluentProvider theme={webLightTheme}>
      <QueryBuilderFluent>
        <QueryBuilder fields={fields} defaultQuery={query} onQueryChange={setQuery} />
      </QueryBuilderFluent>
    </FluentProvider>
  );
}
```

`QueryBuilderFluent` is a React context provider that assigns the following props to all descendant `QueryBuilder` elements. The props can be overridden on the `QueryBuilder` or used directly without the context provider.

| Export                  | `QueryBuilder` prop             |
| ----------------------- | ------------------------------- |
| `fluentControlElements` | `controlElements`               |
| `fluentTranslations`    | `translations`                  |
| `FluentActionElement`   | `controlElements.actionElement` |
| `FluentDragHandle`      | `controlElements.dragHandle`    |
| `FluentNotToggle`       | `controlElements.notToggle`     |
| `FluentShiftActions`    | `controlElements.shiftActions`  |
| `FluentValueEditor`     | `controlElements.valueEditor`   |
| `FluentValueSelector`   | `controlElements.valueSelector` |

> [!TIP]
>
> By default, this package uses icons from `@fluentui/react-icons-mdl2` for button labels. To reset button labels to their default strings, use `defaultTranslations` from `react-querybuilder`.
>
> ```tsx
> <QueryBuilderFluent translations={defaultTranslations}>
> ```
npm package: @react-querybuilder/mantine
Description: Custom Mantine components for react-querybuilder
Latest version: 8.14.4

## @react-querybuilder/mantine

Official [react-querybuilder](https://npmjs.com/package/react-querybuilder) compatibility package for [Mantine](https://mantine.dev/).

- [Demo](https://react-querybuilder.js.org/demo/mantine)
- [Full documentation](https://react-querybuilder.js.org/)
- [CodeSandbox](https://react-querybuilder.js.org/sandbox?t=mantine) / [StackBlitz](https://react-querybuilder.js.org/sandbox?p=stackblitz&t=mantine) example projects

![Screenshot](../../_assets/screenshot-mantine.png)

## Installation

```bash
npm i react-querybuilder @react-querybuilder/mantine @mantine/core @mantine/dates @mantine/hooks
# OR yarn add / pnpm add / bun add
```

## Usage

To configure the query builder to use Mantine-compatible components, place `QueryBuilderMantine` above `QueryBuilder` in the component hierarchy.

```tsx
import { QueryBuilderMantine } from '@react-querybuilder/mantine';
import { useState } from 'react';
import { type Field, QueryBuilder, type RuleGroupType } from 'react-querybuilder';

const fields: Field[] = [
  { name: 'firstName', label: 'First Name' },
  { name: 'lastName', label: 'Last Name' },
];

export function App() {
  const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });

  return (
    <QueryBuilderMantine>
      <QueryBuilder fields={fields} defaultQuery={query} onQueryChange={setQuery} />
    </QueryBuilderMantine>
  );
}
```

`QueryBuilderMantine` is a React context provider that assigns the following props to all descendant `QueryBuilder` elements. The props can be overridden on the `QueryBuilder` or used directly without the context provider.

| Export                   | `QueryBuilder` prop             |
| ------------------------ | ------------------------------- |
| `mantineControlElements` | `controlElements`               |
| `MantineActionElement`   | `controlElements.actionElement` |
| `MantineNotToggle`       | `controlElements.notToggle`     |
| `MantineShiftActions`    | `controlElements.shiftActions`  |
| `MantineValueEditor`     | `controlElements.valueEditor`   |
| `MantineValueSelector`   | `controlElements.valueSelector` |
npm package: @react-querybuilder/material
Description: Custom MUI (Material Design) components for react-querybuilder
Latest version: 8.14.4

## @react-querybuilder/material

Official [react-querybuilder](https://npmjs.com/package/react-querybuilder) compatibility package for [MUI](https://mui.com/)/[Material Design](https://material.io/design).

- [Demo](https://react-querybuilder.js.org/demo/material)
- [Full documentation](https://react-querybuilder.js.org/)
- [CodeSandbox](https://react-querybuilder.js.org/sandbox?t=material) / [StackBlitz](https://react-querybuilder.js.org/sandbox?p=stackblitz&t=material) example projects

![Screenshot](../../_assets/screenshot-material.png)

## Installation

```bash
npm i react-querybuilder @react-querybuilder/material @mui/icons-material @mui/material
# OR yarn add / pnpm add / bun add
```

## Usage

To configure the query builder to use Material-compatible components, place `QueryBuilderMaterial` above `QueryBuilder` and beneath `MaterialProvider` in the component hierarchy.

```tsx
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { QueryBuilderMaterial } from '@react-querybuilder/material';
import { useState } from 'react';
import { type Field, QueryBuilder, type RuleGroupType } from 'react-querybuilder';

const muiTheme = createTheme();

const fields: Field[] = [
  { name: 'firstName', label: 'First Name' },
  { name: 'lastName', label: 'Last Name' },
];

export function App() {
  const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });

  return (
    <ThemeProvider theme={muiTheme}>
      <QueryBuilderMaterial>
        <QueryBuilder fields={fields} defaultQuery={query} onQueryChange={setQuery} />
      </QueryBuilderMaterial>
    </ThemeProvider>
  );
}
```

`QueryBuilderMaterial` is a React context provider that assigns the following props to all descendant `QueryBuilder` elements. The props can be overridden on the `QueryBuilder` or used directly without the context provider.

| Export                    | `QueryBuilder` prop             |
| ------------------------- | ------------------------------- |
| `materialControlElements` | `controlElements`               |
| `materialTranslations`    | `translations`                  |
| `MaterialActionElement`   | `controlElements.actionElement` |
| `MaterialDragHandle`      | `controlElements.dragHandle`    |
| `MaterialNotToggle`       | `controlElements.notToggle`     |
| `MaterialShiftActions`    | `controlElements.shiftActions`  |
| `MaterialValueEditor`     | `controlElements.valueEditor`   |
| `MaterialValueSelector`   | `controlElements.valueSelector` |

> [!TIP]
>
> By default, this package uses icons from `@mui/icons-material` for button labels. To reset button labels to their default strings, use `defaultTranslations` from `react-querybuilder`.
>
> ```tsx
> <QueryBuilderMaterial translations={defaultTranslations}>
> ```

> [!IMPORTANT]
>
> In environments based on React Server Components, [preload the MUI components](https://react-querybuilder.js.org/docs/compat#preload-mui-components).
npm package: @react-querybuilder/native
Description: React Native components for react-querybuilder
Latest version: 8.14.4

## @react-querybuilder/native

Official [react-querybuilder](https://npmjs.com/package/react-querybuilder) compatibility package for [React Native](https://reactnative.dev/).

- [Full documentation](https://react-querybuilder.js.org/)
- [CodeSandbox](https://react-querybuilder.js.org/sandbox?t=native) / [StackBlitz](https://react-querybuilder.js.org/sandbox?p=stackblitz&t=native) example projects

## Installation

```bash
npm i react-querybuilder @react-querybuilder/native
# OR yarn add / pnpm add / bun add
```

## Usage

To render a React Native-compatible query builder, use `QueryBuilderNative`.

```tsx
import { QueryBuilderNative } from '@react-querybuilder/native';
import { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { type Field, formatQuery, type RuleGroupType } from 'react-querybuilder';

const styles = StyleSheet.create({
  outer: { padding: 10, gap: 20 },
  code: { fontFamily: 'monospace' },
});

const fields: Field[] = [
  { name: 'firstName', label: 'First Name' },
  { name: 'lastName', label: 'Last Name' },
];

export function App() {
  const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });

  return (
    <View style={styles.outer}>
      <QueryBuilderNative fields={fields} query={query} onQueryChange={setQuery} />
      <Text style={styles.code}>{formatQuery(query, 'sql')}</Text>
    </View>
  );
}
```

`QueryBuilderNative` accepts the same props `QueryBuilder` and assigns the following props by default.

| Export                         | `QueryBuilder` prop                |
| ------------------------------ | ---------------------------------- |
| `defaultNativeControlElements` | `controlElements`                  |
| `NativeActionElement`          | `controlElements.actionElement`    |
| `NativeInlineCombinator`       | `controlElements.inlineCombinator` |
| `NativeNotToggle`              | `controlElements.notToggle`        |
| `NativeShiftActions`           | `controlElements.shiftActions`     |
| `NativeValueEditor`            | `controlElements.valueEditor`      |
| `NativeValueSelector`          | `controlElements.valueSelector`    |
| `RuleGroupNative`              | `controlElements.ruleGroup`        |
| `RuleNative`                   | `controlElements.rule`             |

For `react-native-web`, assign `defaultNativeWebControlElements` to `controlElements` as in the example above.

| Export                            | `QueryBuilder` prop             |
| --------------------------------- | ------------------------------- |
| `defaultNativeWebControlElements` | `controlElements`               |
| `NativeValueEditorWeb`            | `controlElements.valueEditor`   |
| `NativeValueSelectorWeb`          | `controlElements.valueSelector` |
npm package: @react-querybuilder/rules-engine
Description: Rules engine extension for react-querybuilder
Latest version: 8.14.4

# @react-querybuilder/rules-engine

Rules engine extension for `react-querybuilder`.

> [!CAUTION]
>
> This package is in a very early stage of development.

## Installation

```bash
npm install react-querybuilder @react-querybuilder/rules-engine
# OR yarn add / pnpm add / bun add
```

## Usage

```tsx
import { RulesEngineBuilder } from '@react-querybuilder/rules-engine';

function App() {
  return <RulesEngineBuilder />;
}
```

### Export

Current support includes [`json-rules-engine`](https://github.com/CacheControl/json-rules-engine).

```ts
import { formatRulesEngine } from '@react-querybuilder/rules-engine';

formatRulesEngine(rulesEngine, { format: 'json-rules-engine' });
```

## Documentation

Full documentation is available at [react-querybuilder.js.org](https://react-querybuilder.js.org/).
npm package: @react-querybuilder/tremor
Description: Custom Tremor components for react-querybuilder
Latest version: 8.14.4

## @react-querybuilder/tremor

Official [react-querybuilder](https://npmjs.com/package/react-querybuilder) compatibility package for [Tremor](https://www.tremor.so/).

- [Demo](https://react-querybuilder.js.org/demo/tremor)
- [Full documentation](https://react-querybuilder.js.org/)
- [CodeSandbox](https://react-querybuilder.js.org/sandbox?t=tremor) / [StackBlitz](https://react-querybuilder.js.org/sandbox?p=stackblitz&t=tremor) example projects

![Screenshot](../../_assets/screenshot-tremor.png)

## Installation

```bash
npm i react-querybuilder @react-querybuilder/tremor @tremor/react
# OR yarn add / pnpm add / bun add
```

## Usage

To configure the query builder to use Tremor-compatible components, place `QueryBuilderTremor` above `QueryBuilder` in the component hierarchy.

```tsx
import { useState } from 'react';
import { QueryBuilderTremor } from '@react-querybuilder/tremor';
import { type Field, QueryBuilder, type RuleGroupType } from 'react-querybuilder';

const fields: Field[] = [
  { name: 'firstName', label: 'First Name' },
  { name: 'lastName', label: 'Last Name' },
];

export function App() {
  const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });

  return (
    <QueryBuilderTremor>
      <QueryBuilder fields={fields} defaultQuery={query} onQueryChange={setQuery} />
    </QueryBuilderTremor>
  );
}
```

`QueryBuilderTremor` is a React context provider that assigns the following props to all descendant `QueryBuilder` elements. The props can be overridden on the `QueryBuilder` or used directly without the context provider.

| Export                    | `QueryBuilder` prop             |
| ------------------------- | ------------------------------- |
| `tremorControlElements`   | `controlElements`               |
| `tremorControlClassnames` | `controlClassnames`             |
| `TremorActionElement`     | `controlElements.actionElement` |
| `TremorNotToggle`         | `controlElements.notToggle`     |
| `TremorShiftActions`      | `controlElements.shiftActions`  |
| `TremorValueEditor`       | `controlElements.valueEditor`   |
| `TremorValueSelector`     | `controlElements.valueSelector` |
npm package: @react-querybuilder/ts
Description: TypeScript types for react-querybuilder
Latest version: 6.2.0

## @react-querybuilder/ts

TypeScript types for [react-querybuilder](https://npmjs.com/package/react-querybuilder) and [related packages](https://npmjs.com/org/react-querybuilder).

This package does not need to be installed independently.

[Full documentation](https://react-querybuilder.js.org/)

[Demo](https://react-querybuilder.js.org/demo)