4.1.2 • Published 2 years ago
edsprout-querybuilder v4.1.2
react-querybuilder
The Query Builder component for React
Complete documentation is available at https://react-querybuilder.js.org.
Getting Started
npm install react-querybuilder --save
# OR
yarn add react-querybuilder
Demo
Click here to see a live, interactive demo.
- Clone this repo
yarn
Install dependenciesyarn start
Run a local server- Visit http://localhost:8080 in your browser
To use the official compatibility components as seen in the demo (select different options in the Style dropdown), take a look at the @react-querybuilder
org on npmjs.com.
Basic usage
import { useState } from 'react';
import QueryBuilder, { RuleGroupType } from 'react-querybuilder';
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)} />;
};