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

8.5.0 • Public • Published

@react-querybuilder/mantine

Official react-querybuilder compatibility package for Mantine.

Screenshot

Installation

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.

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

Package Sidebar

Install

npm i @react-querybuilder/mantine

Weekly Downloads

1,205

Version

8.5.0

License

MIT

Unpacked Size

352 kB

Total Files

28

Last publish

Collaborators

  • jakeboone02