react-two-way-querybuilder

    1.0.10 • Public • Published

    React Two Way Querybuilder

    A simple react component that lets you build queries dynamically on UI. Doesn't depend on any 3-d party libraries.

    image

    Installing

    npm i react-two-way-querybuilder --save

    Using

    Two way query builder is flexible and configurable component with a set of possible options.

    Simple usage:

        import React, { Component } from 'react';
        import TwoWayQuerybuilder from 'react-two-way-querybuilder';
    
        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' } },
          { name: 'birthDate', operators: 'all', label: 'Birth date', 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;
    

    Props:

    • fields: your fields used to build a query

      • name: name of the field that would be used in a query
      • label: how your field name would be shown in the dropdown
      • operators: remove this property or set to 'all' if you want to use all operators for this field, else you can limit them by passing the array of the allowed operators ['=', '<', '>']
      • input: type of the input, possible options are: text, textarea, select. If you are using select input type pass options to the object in the following way: input: {type: 'select', options: [{value: '1', name: 'one'}, {value: '2', name: 'two'}]}. Also, it supports validation by passing pattern property with regexp pattern and errorText property for validation error message text.
    • onChange: pass here your function that will be called when data was changed

    • config: configuration object with possible options:

      • query: pass here prepared query, so UI will be built using it.
      • operators: array of operators, the default one is:
        [
          { operator: '=', label: '=' },
          { operator: '<>', label: '<>' },
          { operator: '<', label: '<' },
          { operator: '>', label: '>' },
          { operator: '>=', label: '>=' },
          { operator: '<=', label: '<=' },
          { operator: 'IS NULL', label: 'Null' },
          { operator: 'IS NOT NULL', label: 'Not Null' },
          { operator: 'IN', label: 'In' },
          { operator: 'NOT IN', label: 'Not In' },
         ]
        
      • combinators: array of combinators, the default one is:
      [
          { combinator: 'AND', label: 'And' },
          { combinator: 'OR', label: 'Or' },
          { combinator: 'NOT', label: 'Not' },
      ]
      
      • style: use this object to redefine styles. Properties:
        • primaryBtn: used for primary button styles,
        • deleteBtn: delete button styles,
        • rule: rule styles,
        • condition: condition styles,
        • select: select styles,
        • input: input styles,
        • txtArea: text area styles :D
        • error: error message styling
    • buttonsText: text of the buttons, you can redefine it for multilanguage support or because you just want. By default used following text:

      • addRule: 'Add rule',
      • addGroup: 'Add group',
      • clear: 'Clear',
      • delete: 'Delete'

    Samples

    Visit DEMO storybook to take a look at basic usage cases:

    • existing query:

        import React, { Component } from 'react';
        import TwoWayQuerybuilder from 'react-two-way-querybuilder';;
      
        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' } },
          { name: 'birthDate', operators: 'all', label: 'Birth date', input: { type: 'text' } },
        ];
      
        const config = {
          query: "((firstname='Jack' AND lastName='London') OR lastName='Smith')",
        };
      
        class App extends Component {
      
            handleChange(event) {
              console.log('query', event.query);
            }
      
            render() {
                return (
                     <TwoWayQuerybuilder config={config} fields={fields} onChange={this.handleChange} />
                );
            }
        }
      
        export default App;
      
    • changed input types:

        import React, { Component } from 'react';
        import TwoWayQuerybuilder from 'react-two-way-querybuilder';;
      
        const changedFields = [
          { name: 'firstName', operators: 'all', label: 'First Name', input: { type: 'text' } },
          { name: 'lastName', operators: 'all', label: 'Last Name', input: {
            type: 'select',
            options: [
              { value: 'Smith', name: 'Smith' },
              { value: 'London', name: 'London' },
            ] } },
          { name: 'age', operators: 'all', label: 'Age',
            input: {
            type: 'select',
            options: [
              { value: '28', name: 'twenty eight' },
              { value: '30', name: 'thirty' },
            ] } },
          { name: 'birthDate', operators: 'all', label: 'Birth date', input: { type: 'text' } },
        ];
      
        class App extends Component {
      
            handleChange(event) {
              console.log('query', event.query);
            }
      
            render() {
                return (
                     <TwoWayQuerybuilder config={config} fields={changedFields} onChange={this.handleChange} />
                );
            }
        }
      
        export default App;
      
    • custom styles

        import React, { Component } from 'react';
        import TwoWayQuerybuilder from 'react-two-way-querybuilder';;
      
        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' } },
          { name: 'birthDate', operators: 'all', label: 'Birth date', input: { type: 'text' } },
        ];
      
        const styles = {
          primaryBtn: 'customPrimaryBtn',
          deleteBtn: 'customDeleteBtn',
          rule: 'rule',
          condition: 'condition',
          select: 'querySelect',
          input: 'queryInput',
          txtArea: 'queryText',
        };
      
        const changedStyles = {
          styles,
        };
      
        class App extends Component {
      
            handleChange(event) {
              console.log('query', event.query);
            }
      
            render() {
                return (
                     <TwoWayQuerybuilder config={changedStyles} fields={fields} onChange={this.handleChange} />
                );
            }
        }
      
        export default App;
      
    • validation

        import React, { Component } from 'react';
        import TwoWayQuerybuilder from 'react-two-way-querybuilder';;
      
        const validationFields = [
          { name: 'firstName', operators: 'all', label: 'First Name', input: { 
            type: 'text', errorText: 'Only letters allowed', pattern: new RegExp("[a-z]+", "gi") } },
          { name: 'lastName', operators: 'all', label: 'Last Name', input: {
            type: 'text', errorText: 'Only letters allowed', pattern: new RegExp("[a-z]+", "gi") } },
          { name: 'age', operators: 'all', label: 'Age', input: {
            type: 'text', errorText: 'Only nubmers allowed', pattern: new RegExp('[0-9]+', 'gi') } },
          { name: 'birthDate', operators: 'all', label: 'Birth date', input: { 
            type: 'text', errorText: 'Only nubmers allowed', pattern: new RegExp('[0-9]+', 'gi') }
          },
      

    ];

    class App extends Component {
    
        handleChange(event) {
          console.log('query', event.query);
        }
    
        render() {
            return (
                 <TwoWayQuerybuilder fields={validationFields} onChange={this.handleChange} />
            );
        }
    }
    
    export default App;
    
    
    ##License
    
    React-two-way-quierybuidler is MIT licensed
    

    Keywords

    none

    Install

    npm i react-two-way-querybuilder

    DownloadsWeekly Downloads

    214

    Version

    1.0.10

    License

    MIT

    Unpacked Size

    1.96 MB

    Total Files

    35

    Last publish

    Collaborators

    • lefortov