Package Exports

sek-react-querybuilder
sek-react-querybuilder/dist/index.es.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (sek-react-querybuilder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-querybuilder

Complete documentation

Getting Started

npm install react-querybuilder --save

yarn add react-querybuilder

Demo

Click here to see a live, interactive demo.

To run the demo yourself, go through the following steps:

Clone this repo
yarn Install dependencies
yarn start Run a local server
Visit http://localhost:8080 in your browser

To use the official replacement components as seen in the demo, take a look at the @react-querybuilder org on npmjs.com.

Basic usage

import { useState } from 'react';
import QueryBuilder, { RuleGroupType } from 'react-querybuilder';

const fields = [
  { name: 'firstName', label: 'First Name' },
  { name: 'lastName', label: 'Last Name' },
  { name: 'age', label: 'Age', inputType: 'number' },
  { name: 'address', label: 'Address' },
  { name: 'phone', label: 'Phone' },
  { name: 'email', label: 'Email', validator: ({ value }) => /^[^@]+@[^@]+/.test(value) },
  { name: 'twitter', label: 'Twitter' },
  { name: 'isDev', label: 'Is a Developer?', valueEditorType: 'checkbox', defaultValue: false }
];

export const App = () => {
  const [query, setQuery] = useState<RuleGroupType>({
    combinator: 'and',
    rules: []
  });

  return <QueryBuilder fields={fields} query={query} onQueryChange={setQuery} />;
};