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

9.0.0 • Public • Published

react-querybuilder

The Query Builder component for React

Screenshot

Basic usage

npm install react-querybuilder --save
# OR
yarn add react-querybuilder
import { useState } from 'react';
import { QueryBuilder, RuleGroupType } from 'react-querybuilder';
import 'react-querybuilder/dist/query-builder.css';

const fields = [
  { name: 'firstName', label: 'First Name' },
  { name: 'lastName', label: 'Last Name' },
  { name: 'age', label: 'Age', inputType: 'number' },
  { name: 'address', label: 'Address' },
  { name: 'phone', label: 'Phone' },
  { name: 'email', label: 'Email', validator: ({ value }) => /^[^@]+@[^@]+/.test(value) },
  { name: 'twitter', label: 'Twitter' },
  { name: 'isDev', label: 'Is a Developer?', valueEditorType: 'checkbox', defaultValue: false },
];

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

  return <QueryBuilder fields={fields} query={query} onQueryChange={q => setQuery(q)} />;
};

Package Sidebar

Install

npm i @frontlinetech/react-querybuilder

Weekly Downloads

7

Version

9.0.0

License

UNLICENSED

Unpacked Size

439 kB

Total Files

69

Last publish

Collaborators

  • mopdebeeck