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

    4.1.3 • Public • Published

    react-querybuilder

    The Query Builder component for React

    Screenshot

    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.

    To run the demo yourself...
    1. Clone this repo
    2. yarn Install dependencies
    3. yarn start Run a local server
    4. 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)} />;
    };

    Install

    npm i react-querybuilder

    DownloadsWeekly Downloads

    5,729

    Version

    4.1.3

    License

    MIT

    Unpacked Size

    380 kB

    Total Files

    82

    Last publish

    Collaborators

    • pavanpodila
    • jakeboone02