react-querybuilder

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

Basic 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);
}

Demo

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

Changelog

[v1.0.4] - 2016-06-19

Added

• Documentation and demo