react-querybuilder-extended

React Query Builder Extended - A react component for creating expression

Installation

npm install react-querybuilder-extended --save

Usage

React query builder is easily configurable and flexible expression builder component

Simple Integration

import React, { Component } from 'react';
    import TwoWayQuerybuilder from 'react-querybuilder-extended';

    const fields = [
      { name: 'firstName', operators: 'all', label: 'First Name', input: { type: 'text' } },
      { name: 'lastName', operators: 'all', label: 'Last Name', input: { type: 'text' } },
      { name: 'age', operators: 'all', label: 'Age', input: { type: 'text' } },
    ];

    class App extends Component {

        handleChange(event) {
          console.log('query', event.query);
        }

        render() {
            return (
                 <TwoWayQuerybuilder fields={fields} onChange={this.handleChange} />
            );
        }
    }

    export default App;

Query Builder Props

| Props | Data Type | Description | | ------------- |-------------| -----| | fields | object | Fields define basic structure of the resulting expression. It contains the property name, operator and user input. This tupple will create a rule in the expression. | | onChange | (expression: any) => void | This function will bne triggered with every change in the component values | | config | object | Config defines basic meta structure of the component. Styles, Operators, Combinators etc. | | buttonsText | object | Object that defines the text for the various action buttons available in the component, one can also add multi-lingual support using this object. |