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

1.0.0-alpha.2 • Public • Published

react-querybuilder-mantine

Unofficial react-querybuilder components for Mantine UI. To see them in action, check out the demo or load the example in CodeSandbox.

Installation

npm i --save react-querybuilder dayjs @tabler/icons @emotion/react @mantine/hooks @mantine/core @mantine/dates react-querybuilder-mantine
# OR
yarn add react-querybuilder dayjs @tabler/icons @emotion/react @mantine/hooks @mantine/core @mantine/dates react-querybuilder-mantine

Usage

import React from "react";

import {
  type ColorScheme,
  MantineProvider,
  Stack,
  Textarea,
} from "@mantine/core";
import { mantineControlElements } from "react-querybuilder-mantine";
import {
  type Field,
  QueryBuilder,
  type RuleGroupType,
} from "react-querybuilder";
import "react-querybuilder/dist/query-builder.scss";

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

function App() {
  const colorScheme: ColorScheme = "dark";
  const [query, setQuery] = React.useState<RuleGroupType>({
    combinator: "and",
    rules: [],
  });

  return (
    <MantineProvider theme={{ colorScheme }} withGlobalStyles withNormalizeCSS>
      <Stack p="xs">
        <QueryBuilder
          fields={fields}
          query={query}
          onQueryChange={(q) => setQuery(q)}
          controlElements={mantineControlElements}
        />
        <Textarea autosize readOnly value={JSON.stringify(query, null, "  ")} />
      </Stack>
    </MantineProvider>
  );
}

export default App;

Demo

npm run storybook

Package Sidebar

Install

npm i react-querybuilder-mantine

Weekly Downloads

1

Version

1.0.0-alpha.2

License

MIT

Unpacked Size

107 kB

Total Files

49

Last publish

Collaborators

  • astra
  • xsurya