react-querybuilder

A QueryBuilder component for React

Credits: This component was inspired by prior work from:

• jQuery QueryBuilder
• Angular QueryBuilder

Getting Started

npm install react-querybuilder --save

Demo

Open <path-to-project>/node_modules/react-querybuilder/demo/index.html in your browser.

OR

See live Demo.

Usage

import {QueryBuilder} from 'react-querybuilder';

const fields = [
    {name: 'firstName', label: 'First Name'},
    {name: 'lastName', label: 'Last Name'},
    {name: 'age', label: 'Age'},
    {name: 'address', label: 'Address'},
    {name: 'phone', label: 'Phone'},
    {name: 'email', label: 'Email'},
    {name: 'twitter', label: 'Twitter'},
    {name: 'isDev', label: 'Is a Developer?', value: false},
];

const dom = <QueryBuilder fields={fields}
                          onQueryChange={logQuery}/>


function logQuery(query) {
    console.log(query);
}