Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
zero-awesome-query-builder-test
Advanced tools
Readme
User-friendly React component to build queries.
Inspired by jQuery QueryBuilder
Using awesome Ant Design v4 for widgets
Now Material-UI is also supported!
Install:
npm i react-awesome-query-builder --save
For AntDesign widgets only:
npm i antd --save
For Material-UI widgets only:
npm i @material-ui/core @material-ui/lab @material-ui/icons @material-ui/pickers material-ui-confirm --save
See basic usage for minimum code example.
See API and config for documentation.
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.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 'antd/dist/antd.css'; // or import "react-awesome-query-builder/css/antd.less";
// For Material-UI widgets only:
import MaterialConfig from 'react-awesome-query-builder/lib/config/material';
import 'react-awesome-query-builder/lib/css/styles.css';
import 'react-awesome-query-builder/lib/css/compact_styles.css'; //optional, for more compact styles
// Choose your skin (ant/material/vanilla):
const InitialConfig = AntdConfig; // or MaterialConfig or BasicConfig
// 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`
}
}
import React, { useState } from "react";
import { Query, Builder, Utils as QbUtils } from "react-awesome-query-builder";
// types
import {
JsonGroup,
Config,
ImmutableTree,
BuilderProps
} from "react-awesome-query-builder";
// For AntDesign widgets only:
import AntdConfig from "react-awesome-query-builder/lib/config/antd";
import "antd/dist/antd.css"; // or import "react-awesome-query-builder/css/antd.less";
// For Material-UI widgets only:
//import MaterialConfig from "react-awesome-query-builder/lib/config/material";
import "react-awesome-query-builder/lib/css/styles.css";
import "react-awesome-query-builder/lib/css/compact_styles.css"; //optional, for more compact styles
// Choose your skin (ant/material/vanilla):
const InitialConfig = AntdConfig; // or MaterialConfig or BasicConfig
// You need to provide your own config. See below 'Config format'
const config: 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: JsonGroup = { id: QbUtils.uuid(), type: "group" };
export const Demo: React.FC = () => {
const [state, setState] = useState({
tree: QbUtils.checkTree(QbUtils.loadTree(queryValue), config),
config: config
});
const onChange = (immutableTree: ImmutableTree, config: Config) => {
// Tip: for better performance you can apply `throttle` - see `examples/demo`
setState({ tree: immutableTree, config: config });
const jsonTree = QbUtils.getTree(immutableTree);
console.log(jsonTree);
// `jsonTree` can be saved to backend, and later loaded to `queryValue`
};
const renderBuilder = (props: BuilderProps) => (
<div className="query-builder-container" style={{ padding: "10px" }}>
<div className="query-builder qb-lite">
<Builder {...props} />
</div>
</div>
);
return (
<div>
<Query
{...config}
value={state.tree}
onChange={onChange}
renderBuilder={renderBuilder}
/>
<div className="query-builder-result">
<div>
Query string:{" "}
<pre>
{JSON.stringify(QbUtils.queryString(state.tree, state.config))}
</pre>
</div>
<div>
MongoDb query:{" "}
<pre>
{JSON.stringify(QbUtils.mongodbFormat(state.tree, state.config))}
</pre>
</div>
<div>
SQL where:{" "}
<pre>
{JSON.stringify(QbUtils.sqlFormat(state.tree, state.config))}
</pre>
</div>
<div>
JsonLogic:{" "}
<pre>
{JSON.stringify(QbUtils.jsonLogicFormat(state.tree, state.config))}
</pre>
</div>
</div>
</div>
);
};
<Query />
Props:
{...config}
- destructured query CONFIG
value
- query value in internal Immutable formatonChange
- 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:
<Dialog />
or <Popover />
, please:
disableEnforceFocus={true}
for dialog or popver.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
onChange
callback of <Query>
.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
value
prop to <Query>
(don't forget to also apply checkTree()
).
validateValue
in config, bad ranges) will be deleted if showErrorMessage
is false OR marked with errors if showErrorMessage
is true.
showErrorMessage
in config.settings is true, use this method to check is query has bad values.isForDisplay
= true can be used to make string more "human readable".
errors
, logic
will be rule object and data
will contain all used fields with null values ("template" data).This library uses configarion driven aprroach.
Config defines what value types, operators are supported, how they are rendered, imported, exported.
At minimum, you need to provide your own set of fields as in basic usage.
See CONFIG
for full documentation.
Versions 4.x are backward-compatible with 2.x and 3.x. It's recommended to update your version.
Version | Supported |
---|---|
4.x | :white_check_mark: |
3.x | :white_check_mark: |
2.x | :white_check_mark: |
1.x | :warning: |
0.x | :x: |
See CHANGELOG
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.
Clone this repo and run npm start
.
Open http://localhost:3001/
in a browser.
You will see demo app with hot reload of demo code and local library code.
modules
- Main source code of library
components
- Core React components
widgets
- Components to render list of fields, operators, values of different types. Built with UI frameworksconfig
- Basic config lives here. See CONFIG
docs.export
- Code for export to JsonLogic, MongoDb, SQL, ElasticSearch, plain stringimport
- Code for import from JsonLogicactions
- Redux actionsstores/tree.js
- Redux storeindex.d.ts
- TS definitionscss
- Styles for query builderexamples
- Demo app with hot reload of demo code and local library code, uses TS, uses complex config to demonstrate anvanced usage.sandbox
- Demo app with hot reload of only demo code (uses latest version of library from npm), uses TS, uses AntDesign widgets.sandbox_simple
- Demo app with hot reload of only demo code (uses latest version of library from npm), not uses TS, uses vanilla widgets.tests
- All tests are here. Uses Karma, Mocha, Chai, Enzymenpm run install-all
- Install npm packages in root, examples, sandboxes. Required for other scripts!npm test
- Run tests with Karma and update coverage. Requires Node.js v10+npm run lint
- Run ESLint and TSC (in root, tests, examples, sandboxes)npm run lint-fix
- Run ESLint with --fix
option (in root, tests, examples, sandboxes)npm run clean
- Clean all data that can be re-generated (like node_modules
, build
, coverage
)npm run smoke
- Run tests, lint, build lib, build examples, build sandboxes. Recommended before making PRnpm run build
- Build npm module to lib
, build minified production package to build
npm run build-examples
- Build demo with webpack to examples/build
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 :)
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
This project exists thanks to all the people who contribute. [Contribute].
Become a financial contributor and help us sustain our community. [Contribute]
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
MIT. See also LICENSE.txt
Forked from https://github.com/fubhy/react-query-builder
FAQs
User-friendly query builder for React. Demo: https://ukrbublik.github.io/react-awesome-query-builder
The npm package zero-awesome-query-builder-test receives a total of 40 weekly downloads. As such, zero-awesome-query-builder-test popularity was classified as not popular.
We found that zero-awesome-query-builder-test demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.