@react-querybuilder/bulma

@react-querybuilder/bulma

Official react-querybuilder components for Bulma.

To see them in action, check out the react-querybuilder demo or load the example in CodeSandbox.

Installation

npm i --save react-querybuilder @react-querybuilder/bulma bulma
# OR
yarn add react-querybuilder @react-querybuilder/bulma bulma

Usage

import { bulmaControlElements } from '@react-querybuilder/bulma';
import { QueryBuilder, RuleGroupType } from 'react-querybuilder';
import 'bulma/bulma.sass';

const fields = [
  { name: 'firstName', label: 'First Name' },
  { name: 'lastName', label: 'Last Name' },
];

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

  return (
    <QueryBuilder
      fields={fields}
      query={query}
      onQueryChange={q => setQuery(q)}
      controlElements={bulmaControlElements}
    />
  );
};

Some additional styling may be necessary, e.g.:

.queryBuilder .input {
  width: auto;
}

Changelog

[v4.5.2] - 2022-08-19

Fixed

• Backslashes are now properly escaped when formatQuery generates JSON.parse-able strings ("mongodb" and "json_without_ids" formats).
• The parse* import methods properly handle backslashes.
• [#353] The moment package is no longer included in the build for @react-querybuilder/antd.

Added

• [#333] When a rule has an operator of "between"/"notBetween" and either valueSource: "field" or valueEditorType: "select", the default ValueEditor will display two drop-down lists. The values of the drop-down lists will be joined with a comma when the rule's value property is updated.
• [#337] In conjunction with the "between"-related enhancements above, a new Boolean prop has been added to <QueryBuilder /> called listsAsArrays. This prop works in a similar manner to the parse* option of the same name. When the prop is true, ValueEditor (and ValueSelector for multiple: true) will store lists of values, including "between" value pairs, as proper arrays instead of comma-separated strings.
  • Existing, default format:
    • { field: "f1", operator: "between", value: "f2,f3", valueSource: "field" }
  • listsAsArrays format:
    • { field: "f1", operator: "between", value: ["f2", "f3"], valueSource: "field" }