User-friendly query builder for React

Overview

react-awesome-query-builder

npm travis codecov antd mui Financial Contributors on Open Collective demo sandbox TS sandbox JS

Open in codesandbox.io

User-friendly React component to build queries.

Inspired by jQuery QueryBuilder

Using awesome Ant Design v4 for widgets

Now Material-UI is also supported!

Demo page

Features

Screenshot

  • Highly configurable
  • Fields can be of type:
    • simple (string, number, bool, date/time/datetime, list)
    • structs (will be displayed in selectbox as tree)
    • custom type (dev should add its own widget component in config for this)
  • Comparison operators can be:
    • binary (== != < > ..)
    • unary (is empty, is null)
    • 'between' (for numbers, dates, times)
    • complex operators like 'proximity'
  • Values of fields can be compared with:
    • values
    • another fields (of same type)
    • function (arguments also can be values/fields/funcs)
  • Reordering (drag-n-drop) support for rules and groups of rules
  • Using awesome Ant Design as UI framework with rich features.
    Now Material-UI is also supported!
    (Using another UI framework and custom widgets is possible, see below)
  • Export to MongoDb, SQL, JsonLogic or your custom format
  • Import from JsonLogic
  • TypeScript support (see types and demo in TS)

Getting started

Install:

npm i react-awesome-query-builder

For AntDesign widgets only:

npm i antd

For Material-UI widgets only:

npm i @material-ui/core
npm i @material-ui/icons
npm i @material-ui/pickers
npm i material-ui-confirm

See basic usage and API below.

Demo apps:

  • npm start - demo app with hot reload of demo code and local library code, uses TS, uses complex config to demonstrate anvanced usage.
  • npm run sandbox_ts - demo app with hot reload of only demo code (uses latest version of library from npm), uses TS, uses AntDesign widgets.
  • npm run sandbox_js - demo app with hot reload of only demo code (uses latest version of library from npm), not uses TS, uses vanilla widgets.

v2 Migration

From v2.0 of this lib AntDesign is now optional (peer) dependency, so you need to explicitly include antd (4.x) in package.json of your project if you want to use AntDesign UI.
Please import AntdConfig from react-awesome-query-builder/lib/config/antd and use it as base for your config (see below in usage).
Alternatively you can use BasicConfig for simple vanilla UI, which is by default.
Support of other UI frameworks (like Bootstrap) are planned for future, see Other UI frameworks.

Usage

import React, {Component} from 'react';
import {Query, Builder, BasicConfig, Utils as QbUtils} from 'react-awesome-query-builder';

// For AntDesign widgets only:
import AntdConfig from 'react-awesome-query-builder/lib/config/antd';
import 'react-awesome-query-builder/css/antd.less'; // or import "antd/dist/antd.css";
// For Material-UI widgets only:
import MaterialConfig from 'react-awesome-query-builder/lib/config/material';
// Choose your skin (ant/material/vanilla):
const InitialConfig = AntdConfig; // or MaterialConfig or BasicConfig

import 'react-awesome-query-builder/lib/css/styles.css';
import 'react-awesome-query-builder/lib/css/compact_styles.css'; //optional, for more compact styles

// You need to provide your own config. See below 'Config format'
const config = {
  ...InitialConfig,
  fields: {
    qty: {
        label: 'Qty',
        type: 'number',
        fieldSettings: {
            min: 0,
        },
        valueSources: ['value'],
        preferWidgets: ['number'],
    },
    price: {
        label: 'Price',
        type: 'number',
        valueSources: ['value'],
        fieldSettings: {
            min: 10,
            max: 100,
        },
        preferWidgets: ['slider', 'rangeslider'],
    },
    color: {
        label: 'Color',
        type: 'select',
        valueSources: ['value'],
        fieldSettings: {
          listValues: [
            { value: 'yellow', title: 'Yellow' },
            { value: 'green', title: 'Green' },
            { value: 'orange', title: 'Orange' }
          ],
        }
    },
    is_promotion: {
        label: 'Promo?',
        type: 'boolean',
        operators: ['equal'],
        valueSources: ['value'],
    },
  }
};

// You can load query value from your backend storage (for saving see `Query.onChange()`)
const queryValue = {"id": QbUtils.uuid(), "type": "group"};


class DemoQueryBuilder extends Component {
    state = {
      tree: QbUtils.checkTree(QbUtils.loadTree(queryValue), config),
      config: config
    };
    
    render = () => (
      <div>
        <Query
            {...config} 
            value={this.state.tree}
            onChange={this.onChange}
            renderBuilder={this.renderBuilder}
        />
        {this.renderResult(this.state)}
      </div>
    )

    renderBuilder = (props) => (
      <div className="query-builder-container" style={{padding: '10px'}}>
        <div className="query-builder qb-lite">
            <Builder {...props} />
        </div>
      </div>
    )

    renderResult = ({tree: immutableTree, config}) => (
      <div className="query-builder-result">
          <div>Query string: <pre>{JSON.stringify(QbUtils.queryString(immutableTree, config))}</pre></div>
          <div>MongoDb query: <pre>{JSON.stringify(QbUtils.mongodbFormat(immutableTree, config))}</pre></div>
          <div>SQL where: <pre>{JSON.stringify(QbUtils.sqlFormat(immutableTree, config))}</pre></div>
          <div>JsonLogic: <pre>{JSON.stringify(QbUtils.jsonLogicFormat(immutableTree, config))}</pre></div>
      </div>
    )
    
    onChange = (immutableTree, config) => {
      // Tip: for better performance you can apply `throttle` - see `examples/demo`
      this.setState({tree: immutableTree, config: config});

      const jsonTree = QbUtils.getTree(immutableTree);
      console.log(jsonTree);
      // `jsonTree` can be saved to backend, and later loaded to `queryValue`
    }
}

API

<Query />

Props:

  • {...config} - destructured query CONFIG
  • value - query value in internal Immutable format
  • onChange - callback when value changed. Params: value (in Immutable format), config.
  • renderBuilder - function to render query builder itself. Takes 1 param props you need to pass into <Builder {...props} />.

Notes:

  • If you put query builder component inside Material-UI's <Dialog /> or <Popover />, please:
    • use prop disableEnforceFocus={true} for dialog or popver
    • set css .MuiPopover-root, .MuiDialog-root { z-index: 900 !important; } (or 1000 for AntDesign v3)

<Builder />

Render this component only inside Query.renderBuilder() like in example above:

  renderBuilder = (props) => (
    <div className="query-builder-container">
      <div className="query-builder qb-lite">
          <Builder {...props} />
      </div>
    </div>
  )

Wrapping <Builder /> in div.query-builder is necessary.
Optionally you can add class .qb-lite to it for showing action buttons (like delete rule/group, add, etc.) only on hover, which will look cleaner.
Wrapping in div.query-builder-container is necessary if you put query builder inside scrollable block.

Utils

  • Save, load:

    getTree (immutableValue, light = true) -> Object

    Convert query value from internal Immutable format to JS format. You can use it to save value on backend in onChange callback of <Query>.
    Tip: Use light = false in case if you want to store query value in your state in JS format and pass it as value of <Query> after applying loadTree() (which is not recommended because of double conversion). See issue #190

    loadTree (jsValue, config) -> Immutable

    Convert query value from JS format to internal Immutable format. You can use it to load saved value from backend and pass as value prop to <Query> (don't forget to also apply checkTree()).

    checkTree (immutableValue, config) -> Immutable

    Validate query value corresponding to config. Invalid parts of query (eg. if field was removed from config) will be always deleted. Invalid values (values not passing validateValue in config, bad ranges) will be deleted if showErrorMessage is false OR marked with errors if showErrorMessage is true.

    isValidTree (immutableValue) -> Boolean

    If showErrorMessage in config.settings is true, use this method to check is query has bad values.
  • Export:

    queryString (immutableValue, config, isForDisplay = false) -> String

    Convert query value to custom string representation. isForDisplay = true can be used to make string more "human readable".

    mongodbFormat (immutableValue, config) -> Object

    Convert query value to MongoDb query object.

    sqlFormat (immutableValue, config) -> String

    Convert query value to SQL where string.

    jsonLogicFormat (immutableValue, config) -> {logic, data, errors}

    Convert query value to JsonLogic format. If there are no errors, logic will be rule object and data will contain all used fields with null values ("template" data).
  • Import:

    loadFromJsonLogic (jsonLogicObject, config) -> Immutable

    Convert query value from JsonLogic format to internal Immutable format.

Config format

See CONFIG

Changelog

See CHANGELOG

Other UI frameworks

Currently there are 3 collections of widgets:

Let's say you want to create new collection of Bootstrap widgets to be used in this lib (and submit PR which is always welcomed!).
You can use vanilla widgets as skeleton.
Then to enable new widgets you need to create config overrides like this: material config

Development

To build the component locally, clone this repo then run:
npm install
npm start
Then open localhost:3001 in a browser.

Scripts:

  • npm test - Run tests with Karma and update coverage. Recommended before commits. Requires Node.js v10+
  • npm run lint - Run ESLint. Recommended before commits.
  • npm run lint-fix - Run ESLint with --fix option. Recommended before commits.
  • npm run build-examples - Build examples with webpack. Output path: examples
  • npm run build-npm - Build npm module that can be published. Output path: lib

Feel free to open PR to add new reusable types/widgets/operators (eg., regex operator for string, IP type & widget).
Pull Requests are always welcomed :)

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

react-awesome-query-builder is being sponsored by the following tool; please help to support us by taking a look and signing up to a free trial

License

MIT. See also LICENSE.txt

Forked from https://github.com/fubhy/react-query-builder

Issues
  • Material UI

    Material UI

    • [x] MaterialTextWidget

    • [x] MaterialDateWidget

    • [x] MaterialDateTimeWidget

    • [x] MaterialTimeWidget

    • [x] MaterialSelectWidget

    • [x] MaterialNumberWidget

    • [x] MaterialSliderWidget

    • [x] MaterialRangeWidget

    • [x] MaterialBooleanWidget

    • [x] MaterialMultiSelectWidget

    • [x] MaterialFieldSelect

    • [x] MaterialButton

    • [x] MaterialButtonGroup

    • [x] MaterialConjs

    • [x] MaterialValueSources

    • [x] MaterialConfirm

    • [x] MaterialProvider


    • [x] Number Between: "Warning: value prop on input should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components."
    • [x] Fix vertical position of "from"/"to" labels in Number Between
    • [x] Warning of nullish 2nd value source for Number Between: "Material-UI: You have provided an out-of-range value null for the select component. The available values are value, field, func."
    • [x] Try with showLabels: true
    • [x] ? MaterialFieldSelect - use renderValue as in MaterialSelect, instead of first item "Select field.." in field list
    • [x] TS def
    • [x] Update docs, readme (don't forget to mention al needed MUI packages), bump version
    opened by ukrbublik 22
  • Messing up the styles in an existing project

    Messing up the styles in an existing project

    I have a project and I wanted to integrate this query builder into it, but it messes up all my styles. Can anyone help me to find a way to "isolate" query builder own styles from the rest of the styles from the application?

    opened by MihaiPerju 17
  • Read only rule

    Read only rule

    Is it possible to set a rule as read only?

    feature: other 
    opened by kslysz 14
  • Readonly option

    Readonly option

    This PR adds a few options for readOnly option

    image

    Will remove the "destructive" buttons

    image

    Resolves #32

    opened by ilyakatz 12
  • Control do not restore fields correctly on load

    Control do not restore fields correctly on load

    Describe the bug I created a query from the control that i save in database as json format via JSON.stringify. When i open again my form in edit mode, the fields and associated operators has been restored to the control but not the value. I only use classic value (string or number), no any customizations

    To Reproduce

    • Save query as json to state using JSON.Stringify
    • reload query from json using QbUtils.checkTree(QbUtils.loadTree(JSON.parse(job.query)), config));

    Expected behavior The query parsed should be correctly restored in query control and associated value should be filled in value field.

    Additional context In ReactJS Component, Usage of state for the query and loaded via promise from database

    • configuration fields is generated before loading query component. Fields are requested to API
    • Using Material UI configuration

    sample data: JSON Query used: {"id":"b9a8988a-0123-4456-b89a-b177019fefc4","type":"group","children1":{"babb8a9b-cdef-4012-b456-717701a02d86":{"type":"rule","properties":{"field":"INTERVENANTS","operator":"equal","value":["aaaaaaaaé"],"valueSrc":["value"],"valueType":["text"]}}}}

    extract from config for fields: conjunctions: {AND: {…}} fields: INTERVENANTS: QueryField disabled: false fieldSettings: {} label: "Intervenants" mainWidget: "text" type: "text" valueSources: ["value"] widgets: {text: {…}, field: {…}} proto: Object

    Thanks for your help, Valentin

    opened by ioxFR 12
  • mongodbFormat creates incorrect mongo query for datetime fields

    mongodbFormat creates incorrect mongo query for datetime fields

    mongodbFormat creates query like this: {"alarmStartTS":{"$gt": "2020-03-18 10:40+01:00"}}

    It would be like this: {"alarmStartTS":{"$gt": new ISODate("2020-03-18 10:40+01:00")}}

    solution 
    opened by kovacs-miki 11
  • TypeError: Cannot read property 'interpose' of undefined

    TypeError: Cannot read property 'interpose' of undefined

    Steps to reproduce the bug 1.Select any field from the Select 2.Select the operator 3. Click on the value input field or if Select List field and select operator then click the dropdown selection and without selecting any value click the operator again

    After the third step app cashes.

    Screen Shot 2020-02-11 at 7 15 46 PM

    opened by sanojhettige 11
  • New type in query builder?

    New type in query builder?

    Is there any way to add new type other than existing? Like for between query builder I would like add slider control (other that two input controls), for that I tried to add new Type but its not working for my. Or is there any other way to add Slider widget in existing code?

    opened by ravipatil1982 10
  • Unable to import AntD widgets in new version [Typescript]

    Unable to import AntD widgets in new version [Typescript]

    Describe the bug I upgraded to 2.0.1 because of #187, and looked at TS example. When importing AntdConfig / Widgets i get a module not found error

    Module not found: Can't resolve 'react-awesome-query-builder/components/widgets/antd' in '....\Web\wwwroot\src\queryBuilder\config'
    

    If i change the imports to prefix /modules/ (before /components/) i get an unexpected token error

    SyntaxError: ...\Web\wwwroot\node_modules\react-awesome-query-builder\modules\components\widgets\antd\index.js: Unexpected token (30:48)
    
      28 | 
      29 | import { ConfigProvider } from 'antd';
    > 30 | export const Provider = ({config, children}) => <ConfigProvider locale={config.settings.locale.antd}>{children}</ConfigProvider>;
         |                                                 ^
    

    To Reproduce

    • Update to ^2.0.1
    • Add
    import AntdConfig from 'react-awesome-query-builder/config/antd';
    import * as AntdWidgets from 'react-awesome-query-builder/components/widgets/antd';
    
    • Run yarn start

    Expected behavior Being able to resolve the modules. Screenshots

    image

    Additional context Add any other context about the problem here.

    opened by andersjoh 10
  • Group conditions exported incorrectly (except MongoDB)

    Group conditions exported incorrectly (except MongoDB)

    Describe the bug The exported logic of group conditions differs depending on the export format. Looks like only MongoDB export works right.

    To Reproduce go to https://ukrbublik.github.io/react-awesome-query-builder/ and try this: image

    MongoDB export produces code that checks product and score fields simultaneously for each element of results array :

    {
      "results": {
        "$elemMatch": {
          "product": "abc",
          "score": {
            "$gt": 8
          }
        }
      }
    }
    

    But jsonLogic checks them independently:

    {
      "and": [
        {
          "and": [
            {
              "==": [
                {
                  "var": "results.product"
                },
                "abc"
              ]
            },
            {
              ">": [
                {
                  "var": "results.score"
                },
                8
              ]
            }
          ]
        }
      ]
    }
    

    Expected behavior jsonLogic export should look like that:

    {
      "some": [
        {"var":"results"},
        {
          "and": [
            {
              "==": [
                {
                  "var": "product"
                },
                "abc"
              ]
            },
            {
              ">": [
                {
                  "var": "score"
                },
                8
              ]
            }
          ]
        }
      ]
    }
    
    opened by jetdream 9
  • Removing the single rule of a group with NOT conjunction keeps the rule as

    Removing the single rule of a group with NOT conjunction keeps the rule as "NOT"

    Describe the bug When I create a group with a single rule and remove this rule, the generated query remains just with "NOT" but the rest of the rule is removed as expected.

    To Reproduce Fork the repo; Run it with yarn start; Clear the seeded data from example; Create some nested groups with one rule for each and mark NOT; Remove some groups rules; Chech that the generated rule is "NOT (user.firstName == \"1\" && NOT (NOT (NOT (SOME OF cars HAVE vendor == \"Ford\"))))".

    Expected behavior I expected that the rule would be completely removed.

    Screenshots image

    Additional context If NOT is not selected, then the rule gets removed from the final query, as expected image

    opened by PauloStanize-NHT 6
  • Add jsonLogic to Typescript definition for config.widgets

    Add jsonLogic to Typescript definition for config.widgets

    We're having to manually override typescript definition in order to include jsonLogic is Date & datetime widgets

    e.g. in order for our config to contain

     widgets: {
        ...MaterialConfig.widgets,
        date: {
          ...MaterialConfig.widgets.date,
          valueFormat: 'YYYY-MM-DD',
          jsonLogic: (value) => value,
        },
    }
    

    we need to override TS defs with:

    declare module 'react-awesome-query-builder' {
      interface BaseWidget extends QueryBuilderBaseWidget {
        jsonLogic?: (
          val: any,
          fieldDef: Object,
          wgtDef: Object,
          op: string,
          opDef: Object,
        ) => any;
      }
    }
    
    opened by pricea1 1
  • MUI v5 support?

    MUI v5 support?

    Issuehunt badges

    See subject. Was just looking for a time table on compatibility.

    It looks like there are issues with inheriting the application themes properly and the theming of the date pickers, but this is kinda expected given what changed in v5.

    In the interim, does anyone have any advice on how to fix the date pickers theming?


    IssueHunt Summary

    Backers (Total: $5.00)

    Become a backer now!

    Or submit a pull request to get the deposits!

    Tips

    help wanted :dollar: Funded on Issuehunt 
    opened by MisterCheesy 2
  • more options for showing conjunctions

    more options for showing conjunctions

    Is your feature request related to a problem? Please describe.

    I have a query builder config with only the OR operator, and I want to show the operator above the field in a disabled state.

    I made a patch that accomplishes this, but maybe there's a better way I didn't find, or a better way to give people more control over showing/hiding conjunctions.

    ######################################################
    # PATCH DOCUMENTATION
    #
    # show conjunction if only 1 conjunction available, 
    # but disable it if less than 2 conjunctions available
    # used to show OR 
    ######################################################
    
    diff --git a/node_modules/react-awesome-query-builder/lib/components/item/Group.js b/node_modules/react-awesome-query-builder/lib/components/item/Group.js
    index c45f0dd..3a5f505 100644
    --- a/node_modules/react-awesome-query-builder/lib/components/item/Group.js
    +++ b/node_modules/react-awesome-query-builder/lib/components/item/Group.js
    @@ -183,7 +183,7 @@ var BasicGroup = /*#__PURE__*/function (_PureComponent) {
               children1 = _this$props.children1,
               config = _this$props.config;
           var conjunctionCount = Object.keys(conjunctionOptions).length;
    -      return conjunctionCount > 1 || this.showNot();
    +      return conjunctionCount > 0 || this.showNot();
         }
       }, {
         key: "isOneChild",
    @@ -323,6 +323,7 @@ var BasicGroup = /*#__PURE__*/function (_PureComponent) {
               _showNot = _config$settings.showNot,
               notLabel = _config$settings.notLabel;
           var conjunctionOptions = this.conjunctionOptions();
    +
           if (!this.showConjs()) return null;
           if (!children1.size) return null;
           var renderProps = {
    diff --git a/node_modules/react-awesome-query-builder/lib/components/widgets/material/core/MaterialConjs.js b/node_modules/react-awesome-query-builder/lib/components/widgets/material/core/MaterialConjs.js
    index 75318d1..e718718 100644
    --- a/node_modules/react-awesome-query-builder/lib/components/widgets/material/core/MaterialConjs.js
    +++ b/node_modules/react-awesome-query-builder/lib/components/widgets/material/core/MaterialConjs.js
    @@ -34,7 +34,7 @@ var _default = function _default(_ref) {
       var conjsCount = Object.keys(conjunctionOptions).length;
       var lessThenTwo = disabled;
       var forceShowConj = config.settings.forceShowConj;
    -  var showConj = forceShowConj || conjsCount > 1 && !lessThenTwo;
    +  var showConj = forceShowConj || conjsCount > 0 && !lessThenTwo;
     
       var renderOptions = function renderOptions() {
         return Object.keys(conjunctionOptions).map(function (key) {
    @@ -79,7 +79,7 @@ var _default = function _default(_ref) {
         disableElevation: true,
         variant: "contained",
         size: "small",
    -    disabled: readonly
    +    disabled: readonly || conjsCount < 2
       }, showNot && renderNot(), showConj && renderOptions()));
     };
    
    opened by megantaylor 0
  • Polymorphic fields

    Polymorphic fields

    Is your feature request related to a problem? Please describe.

    Say I have the following object:

    {
      values: [
        {type: '1', props: {.a: 1 }},
        {type: '2', props: {.a: 2 }}
      ]
    }
    

    Right now, the only way is to define the following fields:

    {
      values: {
        type: '!group',
        subfields: {
          type: {
            type: 'select',
            valueSources: ['value'],
            fieldSettings: {
              listValues: [
                { value: '1' },
                { value: '2' },
              ],
            },
          },
          value: {
            type: '!group',
            subfields: {
              a: { type: 'text', valueSources: ['value'] },
              b: { type: 'text', valueSources: ['value'] },
            },
          },
        },
      },
    }
    

    Which may lead to invalid rules. If someone selects field 1 and value.b in the criteria, nothing will ever match, and it's misleading for users.

    Describe the solution you'd like I would create a new property allowing a dynamic schema to be selected:

    const val: Fields = {
      values: {
        type: '!group',
        subfields: {
          type: { /*...*/ },
          value: {
            type: '!group',
            subfields: parent => {
              switch (parent.field) {
                case '1': 
                  return {
                    a: { type: 'text', valueSources: ['value'] },
                  };
                case '2':
                  return {
                    b: { type: 'text', valueSources: ['value'] },
                  };
              }
            },
          },
        },
      },
    };
    

    Describe alternatives you've considered I guess this is related to #43. The only alternative at the moment is to extract value and apply the json logic on every item in it. That removes the need for a polymorphic definition, but it's not always handy when you have multiple levels of polymorphic objects.

    Additional context N/A

    opened by gempain 1
  • Separation of fields for LHS and RHS in the query builder

    Separation of fields for LHS and RHS in the query builder

    Can we have specific fields that can be configured in the LHS and likewise for RHS separately?

    opened by Samprita98 1
  • Disable a single operator

    Disable a single operator

    Hello, I want to know if there is a way to disable a single operator depending on the events on the query builder. For example, if the conjunction is on "OR" disables an operator, or if within a group you have many queries to use that operator and force the user to choose a different operator at least once.

    feature: other 
    opened by fabio123789 3
  • Array of custom type

    Array of custom type

    Describe the bug Cannot compare !group subField with a field of the same type Can compare field to a !group subField.

    I created a custom type called categoryType. Then I wanted to use it both in simple and array-like fields. I encountered three issues when using it with the latter one.

    1. No available data in a fields' select for the array element.

    2. Using custom function with "CategoryType" field as an argument for an array element causes Can't cut group CategoriesArray from field CategoryField1

    3. Simple field of categoryType can be compared to an element of the collection (without specifying which one)

    The screenshots below are representing each of these situations.

    To Reproduce

    https://codesandbox.io/s/eager-boyd-fe71z

    Expected behavior

    For three described situations:

    1. Fields are available for an array element in the presented case.
    2. No exception should be presented in the presented case.
    3. Simple field of categoryType CANNOT be compared to an element of the collection in the presented case.

    Screenshots 1.

    image

    image

    image

    Additional context

    All these problems can be caused by the way how I specified the array field (CategoriesArray) and how I used subfields. However, i didn't find any example/demo of an array of custom types (or some primitive type) that would match my scenario. Is there a way to fix/workaround it?

    bug investigate 
    opened by bukowskim 0
  • Validate values based on selected operator

    Validate values based on selected operator

    1. I'm wondering if it's possible to validate a value based on the selected operator. For example, if I have a field "IP Address" when the operator is "==" I want to validate that the value entered is a valid IP. If the operator is "starts with" then I don't need the validation to be as strict. I've looked at the fieldSettings.validateValue property but it doesn't seem to have access to the operator. Is there a better way of doing this?

    2. Is it possible to get access the list of validation errors from outside of the Query component? I know I can check if the tree is valid using isValidTree. The errors field returned from jsonLogicFormat is empty, the demo behaves the same way though it looks like this should be an expected way of listing errors. The tree object passed to the onChange function also doesn't appear to have the errors in its properties.

    opened by cmittelholtz 2
  • Bump eslint from 7.32.0 to 8.1.0

    Bump eslint from 7.32.0 to 8.1.0

    Bumps eslint from 7.32.0 to 8.1.0.

    Release notes

    Sourced from eslint's releases.

    v8.1.0

    • 446b4b3 Docs: Update commit message format docs (#15200) (Nicholas C. Zakas)
    • d9d84a0 Fix: keyword-spacing conflict with space-infix-ops on > (fixes #14712) (#15172) (Milos Djermanovic)
    • a1f7ad7 Fix: allow baseConfig to extend preloaded plugin config (fixes #15079) (#15187) (Milos Djermanovic)
    • 3d370fb New: Add no-unused-private-class-members rule (fixes #14859) (#14895) (Tim van der Lippe)
    • e926b17 New: Add name to RuleTester (#15179) (Gareth Jones)
    • 90a5b6b Chore: improve performance of :function selector (#15181) (Milos Djermanovic)
    • 31af1c8 Chore: fix counting of files in performance test (#15190) (Milos Djermanovic)
    • 1b87fa8 Build: add node v17 (#15193) (唯然)
    • 0fb3bb2 Docs: remove instanceof from keyword-spacing docs (#15180) (Milos Djermanovic)
    • 249a040 Upgrade: eslint-plugin-eslint-plugin to v4 (#15169) (Bryan Mishkin)
    • 35f3254 Docs: Describe range in rule docs (fixes #14162) (#15174) (Nicholas C. Zakas)
    • b5049c8 Chore: Update stale bot settings (#15173) (Nicholas C. Zakas)
    • 2b32f50 Docs: Fix typo in README.md (#15168) (Dmitriy Fishman)
    • dd58cd4 Chore: migrate master to main (#15062) (Nitesh Seram)
    • ec0f8e0 Chore: Add stale issue/PR checker (#15151) (Nicholas C. Zakas)
    • 2cfbd4b Docs: Update README team and sponsors (ESLint Jenkins)

    v8.0.1

    v8.0.0

    • 7d3f7f0 Upgrade: unfrozen @​eslint/eslintrc (fixes #15036) (#15146) (Brandon Mills)
    • 2174a6f Fix: require-atomic-updates property assignment message (fixes #15076) (#15109) (Milos Djermanovic)
    • f885fe0 Docs: add note and example for extending the range of fix (refs #13706) (#13748) (Milos Djermanovic)
    • 3da1509 Docs: Add jsdoc type annotation to sample rule (#15085) (Bryan Mishkin)
    • 68a49a9 Docs: Update Rollup Integrations (#15142) (xiaohai)
    • d867f81 Docs: Remove a dot from curly link (#15128) (Mauro Murru)
    • 9f8b919 Sponsors: Sync README with website (ESLint Jenkins)
    • 4b08f29 Sponsors: Sync README with website (ESLint Jenkins)
    • ebc1ba1 Sponsors: Sync README with website (ESLint Jenkins)
    • 2d654f1 Docs: add example .eslintrc.json (#15087) (Nicolas Mattia)
    • 16034f0 Docs: fix fixable example (#15107) (QiChang Li)
    • 07175b8 8.0.0-rc.0 (ESLint Jenkins)
    • 71faa38 Build: changelog update for 8.0.0-rc.0 (ESLint Jenkins)
    • 67c0074 Update: Suggest missing rule in flat config (fixes #14027) (#15074) (Nicholas C. Zakas)
    • cf34e5c Update: space-before-blocks ignore after switch colons (fixes #15082) (#15093) (Milos Djermanovic)
    • c9efb5f Fix: preserve formatting when rules are removed from disable directives (#15081) (Milos Djermanovic)
    • 14a4739 Update: no-new-func rule catching eval case of MemberExpression (#14860) (Mojtaba Samimi)
    • 7f2346b Docs: Update release blog post template (#15094) (Nicholas C. Zakas)
    • fabdf8a Chore: Remove target.all from Makefile.js (#15088) (Hirotaka Tagawa / wafuwafu13)
    • e3cd141 Sponsors: Sync README with website (ESLint Jenkins)
    • 05d7140 Chore: document target global in Makefile.js (#15084) (Hirotaka Tagawa / wafuwafu13)
    • 0a1a850 Update: include ruleId in error logs (fixes #15037) (#15053) (Ari Perkkiö)
    • 47be800 Chore: test Property > .key with { a = 1 } pattern (fixes #14799) (#15072) (Milos Djermanovic)
    • a744dfa Docs: Update CLA info (#15058) (Brian Warner)
    • 9fb0f70 Chore: fix bug report template (#15061) (Milos Djermanovic)
    • f87e199 Chore: Cleanup issue templates (#15039) (Nicholas C. Zakas)

    ... (truncated)

    Changelog

    Sourced from eslint's changelog.

    v8.1.0 - October 22, 2021

    • 446b4b3 Docs: Update commit message format docs (#15200) (Nicholas C. Zakas)
    • d9d84a0 Fix: keyword-spacing conflict with space-infix-ops on > (fixes #14712) (#15172) (Milos Djermanovic)
    • a1f7ad7 Fix: allow baseConfig to extend preloaded plugin config (fixes #15079) (#15187) (Milos Djermanovic)
    • 3d370fb New: Add no-unused-private-class-members rule (fixes #14859) (#14895) (Tim van der Lippe)
    • e926b17 New: Add name to RuleTester (#15179) (Gareth Jones)
    • 90a5b6b Chore: improve performance of :function selector (#15181) (Milos Djermanovic)
    • 31af1c8 Chore: fix counting of files in performance test (#15190) (Milos Djermanovic)
    • 1b87fa8 Build: add node v17 (#15193) (唯然)
    • 0fb3bb2 Docs: remove instanceof from keyword-spacing docs (#15180) (Milos Djermanovic)
    • 249a040 Upgrade: eslint-plugin-eslint-plugin to v4 (#15169) (Bryan Mishkin)
    • 35f3254 Docs: Describe range in rule docs (fixes #14162) (#15174) (Nicholas C. Zakas)
    • b5049c8 Chore: Update stale bot settings (#15173) (Nicholas C. Zakas)
    • 2b32f50 Docs: Fix typo in README.md (#15168) (Dmitriy Fishman)
    • dd58cd4 Chore: migrate master to main (#15062) (Nitesh Seram)
    • ec0f8e0 Chore: Add stale issue/PR checker (#15151) (Nicholas C. Zakas)
    • 2cfbd4b Docs: Update README team and sponsors (ESLint Jenkins)

    v8.0.1 - October 13, 2021

    v8.0.0 - October 9, 2021

    • 7d3f7f0 Upgrade: unfrozen @​eslint/eslintrc (fixes #15036) (#15146) (Brandon Mills)
    • 2174a6f Fix: require-atomic-updates property assignment message (fixes #15076) (#15109) (Milos Djermanovic)
    • f885fe0 Docs: add note and example for extending the range of fix (refs #13706) (#13748) (Milos Djermanovic)
    • 3da1509 Docs: Add jsdoc type annotation to sample rule (#15085) (Bryan Mishkin)
    • 68a49a9 Docs: Update Rollup Integrations (#15142) (xiaohai)
    • d867f81 Docs: Remove a dot from curly link (#15128) (Mauro Murru)
    • 9f8b919 Sponsors: Sync README with website (ESLint Jenkins)
    • 4b08f29 Sponsors: Sync README with website (ESLint Jenkins)
    • ebc1ba1 Sponsors: Sync README with website (ESLint Jenkins)
    • 2d654f1 Docs: add example .eslintrc.json (#15087) (Nicolas Mattia)
    • 16034f0 Docs: fix fixable example (#15107) (QiChang Li)
    • 07175b8 8.0.0-rc.0 (ESLint Jenkins)
    • 71faa38 Build: changelog update for 8.0.0-rc.0 (ESLint Jenkins)
    • 67c0074 Update: Suggest missing rule in flat config (fixes #14027) (#15074) (Nicholas C. Zakas)
    • cf34e5c Update: space-before-blocks ignore after switch colons (fixes #15082) (#15093) (Milos Djermanovic)
    • c9efb5f Fix: preserve formatting when rules are removed from disable directives (#15081) (Milos Djermanovic)
    • 14a4739 Update: no-new-func rule catching eval case of MemberExpression (#14860) (Mojtaba Samimi)
    • 7f2346b Docs: Update release blog post template (#15094) (Nicholas C. Zakas)
    • fabdf8a Chore: Remove target.all from Makefile.js (#15088) (Hirotaka Tagawa / wafuwafu13)
    • e3cd141 Sponsors: Sync README with website (ESLint Jenkins)
    • 05d7140 Chore: document target global in Makefile.js (#15084) (Hirotaka Tagawa / wafuwafu13)
    • 0a1a850 Update: include ruleId in error logs (fixes #15037) (#15053) (Ari Perkkiö)
    • 47be800 Chore: test Property > .key with { a = 1 } pattern (fixes #14799) (#15072) (Milos Djermanovic)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
Releases(4.8.0)
  • 4.8.0(Nov 17, 2021)

    4.8.0

    • Added read-only mode switch for rules and groups. See showLock and canDeleteLocked config options, custom JsonLogic op locked, setLock action, lockLabel and lockedLabel. Added Switch components, see renderSwitch. (issue #377) (PR #490)
    • Fixed issue with frozen config (Object.freeze) by using clone (issue #345) (PR #490)
    • Fix: Filter value sources for func args correctly. LHS field can be used as arg in RHS function. (PR #490)
    • MUI - Support showSearch (autocomplete) for field select widget (issue #479 #521) (PR #563)
    • AntDesign - Fix FieldSelect with 3+ level !struct nesting (issue #224) (PR #564)
    Source code(tar.gz)
    Source code(zip)
  • 4.7.2(Nov 11, 2021)

  • 4.7.1(Nov 9, 2021)

    • 4.7.1
      • Fixed potential inconsistent order of fields (issue #335) (PR #553)
      • Bump webpack-dev-server from 3.11.2 to 4.4.0 (PR #540)
      • Change FieldItems type definition from map to array (issues #550, #363) (PR #551)
      • Spreading customProps to vanilla widgets (PR #546)
      • Fix for allowCustomValues (PR #545)
      • Use minimum material-ui version 4.12.3 and use new createTheme instead of deprecated createMuiTheme (issue #463) (PR #531)
    Source code(tar.gz)
    Source code(zip)
  • 4.7.0(Oct 23, 2021)

    • Add explicit not: false in new group (issue #512)
    • Fix: don't automatically add one rule to query when it become empty when canLeaveEmptyGroup=true (issue #504)
    • Added config forceShowConj (issue #474)
    • Fixed import of complex hierarchy fields (combination of !group and !struct) from JsonLogic (issues #517, #333)
    • Fixed non-ordered map bug (issue #501)
    Source code(tar.gz)
    Source code(zip)
  • 4.6.0(Oct 19, 2021)

    • 4.6.0
      • Added groupId (id of the parent Item - Group, RuleGroup, RuleGroupExt etc) to field's, operartor's and widget's props (PR #510)
      • Fixed export to ES when group is empty (broken 'Clear' button in demo app) (PR #511)
      • Added 3rd param actionMeta to onChange() to get info about action (PR #445) (issue #351)
      • Added demo of using actions programmatically (see run actions in demo app) (PR #445)
      • Added config shouldCreateEmptyGroup (default false) (PR #445)
      • Now config canLeaveEmptyGroup is true by default (PR #445) (issue #504)
      • Breaking changes for format with isForDisplay=true - don't wrap strings with ", replace == with = (PR #518)
      • Fixed type definition for export utils - can return undefined (PR #516)
      • Fixed use of hideOperator (PR #523) (issue #292)
    Source code(tar.gz)
    Source code(zip)
  • 4.5.0(Sep 15, 2021)

    • 4.5.0
      • Added basic support of export to ElasticSearch (PR #469)
      • Export all helper funcs from configUtils (PR #493)
      • Fixed bug with zero value in MaterialSelect (PR #392)
    Source code(tar.gz)
    Source code(zip)
  • 4.4.3(Aug 19, 2021)

    • babel: use "@babel/plugin-transform-runtime" to avoid globally defined regenerator runtime (PR #480)
    • Fix export of not in some!group into JsonLogic (issue #476) (PR #484)
    • Fixed issue with default import/export in Vite build (PR #481)
    Source code(tar.gz)
    Source code(zip)
  • 4.3.0(Jun 28, 2021)

    • Functions used in examples now moved to BasicFuncs (exported with lib)
    • Added funcs RELATIVE_DATETIME, NOW, UPPER
    • Added option showPrefix for func args (false by default)
    • Added missing mongoFormatValue for all types in basic config (now dates are exported as Date objects)
    Source code(tar.gz)
    Source code(zip)
  • 4.1.1(Jun 23, 2021)

    • 4.1.1
      • Fix warning about showSearch in MUI theme
      • Fix incorrect override of vanilla button label (issue #347)
      • Fix display default conj (issue #426)
      • Don't wrap in MUI ThemeProvider if no theme or locale provided (issue #325)
      • Fix canLeaveEmptyGroup logic (issue #378)
    Source code(tar.gz)
    Source code(zip)
  • 4.1.0(Jun 18, 2021)

    • 4.1.0
      • Fixed lint errors in code
      • Reorganized files in tests
      • Updated packages
      • Now minimum supported NodeJs is 12.13
      • Added TSC linting
      • Now ESLint checks types in TS files
      • Added new scripts: install-all, clean, reinstall, build-all, check-hot, tsc, eslint, smoke, resmoke. Renamed sandbox_ts to sandbox-ts, sandbox_js to sandbox-js.
      • Fixed problems with VSCode's TSLint plugin
      • Moved from deprecated prepublish to prepare in package.json
    Source code(tar.gz)
    Source code(zip)
  • 4.0.4(Jun 15, 2021)

  • 4.0.0(Jun 7, 2021)

    • 4.0.0
      • Removed setting useGroupsAsArrays. Instead added field config mode for type !group with values: some (default, corresponding useGroupsAsArrays = true), array (new, user can choose one of group operators), struct (obsolete, corresponding useGroupsAsArrays = false).
      • For type=!group and mode=array:
        • new field configs are available: conjunctions, showNot, operators, defaultOperator, initialEmptyWhere
        • you can use group operators some, none, all or operators with 1 integer opearnd (for count): equal, not_equal, less, between, ..
        • localization setting addSubRuleLabel
      • Removed obsolete setting hideConjForOne
    Source code(tar.gz)
    Source code(zip)
  • 2.2.0(Oct 4, 2020)

Owner
Denis Oblogin
Spice must flow. State must flux.
Denis Oblogin
Tutorial for using react query and supabase

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run

Ankit Jena 13 Nov 18, 2021
React Query for Firestore, that you can actually use in production, on every screen.

React Query for Firestore, that you can actually use in production, on every screen.

Amine Bl 67 Nov 29, 2021
React Query and Axios example with CRUD operation - GET/POST/PUT/DELETE request with Rest API

React Query Axios example with Rest API React Client with React Query and Axios to make CRUD requests to Rest API in that: React Query Axios GET reque

null 5 Nov 9, 2021
:fire: An extremely fast, React-like JavaScript library for building modern user interfaces

Inferno is an insanely fast, React-like library for building high-performance user interfaces on both the client and server. Description The main obje

Inferno 15.2k Nov 21, 2021
React project with Google Firebase API, create partys with admin view and user view. Users can ask topics to admin, and support other topics.

?? Tecnologias Esse projeto foi desenvolvido com as seguintes tecnologias: React Firebase TypeScript ?? Como executar Clone o projeto e acesse a pasta

Felipe Souza 3 Aug 27, 2021
TSDX React w/ Storybook User Guide

TSDX React w/ Storybook User Guide Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented wit

Achraf 1 Nov 11, 2021
Generate fun kaleidoscope for user avatars.

React Avatar Generator This was inspired by an old website called LayerVault. You can see an example of how that used to look like here. Getting Start

Joseph Smith 38 Nov 28, 2021
Consuming GitHub API, showing user's profile and repositories, with ReactJS

GitHubProfiles Project made with ReactJS to practice API consuming using GitHub API, in order to show in a simple way user's profile and repositories.

Hugo Ferreira 5 Sep 11, 2021
:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!

react-universal-hooks React Universal Hooks : just use****** everywhere. Support React >= 16.8.0 Installation Using npm: $ npm install --save react-un

Salvatore Ravidà 163 Nov 16, 2021
React ESI: Blazing-fast Server-Side Rendering for React and Next.js

React ESI: Blazing-fast Server-Side Rendering for React and Next.js React ESI is a super powerful cache library for vanilla React and Next.js applicat

Kévin Dunglas 592 Nov 24, 2021
30 Days of React challenge is a step by step guide to learn React in 30 days

30 Days of React challenge is a step by step guide to learn React in 30 days. It requires HTML, CSS, and JavaScript knowledge. You should be comfortable with JavaScript before you start to React. If you are not comfortable with JavaScript check out 30DaysOfJavaScript. This is a continuation of 30 Days Of JS. This challenge may take up to 100 days, follow your own pace.

Asabeneh 8.6k Nov 28, 2021
React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches and UI elements which may overlap the app content.

React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches (e.g. iPhone X) and UI elements which may overlap the app content.

MohammadAli Karimi 11 Nov 18, 2021
React People lists and connects React developers around the world.

React People React People lists and connects React developers around the world. Progress View the Project page for details on what's planned and what'

Vitor Leonel 14 Aug 21, 2020
React Backbone Binding that works with React 16

WithBackbone React Higher Order Component which will bind Backbone Data that works with React Fiber (v.16) Why did we make it There are already a coup

Beanworks 2 Mar 19, 2021
A description of React's new core algorithm, React Fiber

React Fiber Architecture Introduction React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of

Andrew Clark 9.1k Dec 1, 2021
React Clone - How React Works: An In-Depth Guide

Как работает React: подробное руководство Привет, друзья! В этой статье я покажу вам, с чего начинается React. Что это означает? Это означает, что мы

Igor Agapov 5 Nov 25, 2021
A drum machine built with React using the Create React App toolchain.

drum-machine A simple drum machine built with React using the Create React App toolchain. Getting Started Clone or download the repository. Open a com

Ryan Schafer 1 Nov 25, 2021
React component to blur image backgrounds using canvas.

React Blur React component for creating blurred backgrounds using canvas. Live demo Installation npm install react-blur --save Usage var Blur = requir

Javier Bórquez 427 Nov 26, 2021
📑 A React component to easily create demos of other components

React DemoTab ?? A React component to easily create demos of other components Install npm install react-demo-tab Demo DemoTab example Example import R

mkosir 24 Nov 9, 2021