@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.3.1] - 2022-05-21

Changed

• If using TypeScript, custom operatorSelector components will now need to accommodate OptionGroup<NameLabelPair>[] in addition to the normal NameLabelPair[].

Added

• [#304] Many compatibility components now accept the props of the rendered library component in addition to the standard props (see documentation), allowing customization specific to the style library.
• [#306] New prop autoSelectOperator (documentation) behaves like autoSelectField but for the operator selector.
  • The fields and operators properties of the translations prop object now accept placeholderName, placeholderLabel, and placeholderGroupLabel properties (documentation). These translatable strings set the default field and operator values and labels when autoSelectField and/or autoSelectOperator are set to false.
  • Corresponding options were also added to formatQuery, which will now ignore rules where the field or operator match the placeholder values for most export formats.
• [#303] Added support for wildcards concatenated to field names in parseSQL. Examples:

<table> <tr> <th>

SQL

</th> <th>

Generated RuleType object

</th> </tr> <tr> <td>

"lastName LIKE firstName || '%'"

</td> <td>

{
  "field": "lastName",
  "operator": "beginsWith",
  "value": "firstName",
  "valueSource": "field"
}

</td> </tr> <tr> <td>

"lastName NOT LIKE '%' || firstName || '%'"

</td> <td>

{
  "field": "lastName",
  "operator": "doesNotContain",
  "value": "firstName",
  "valueSource": "field"
}

</td> </tr> </table>

Fixed

• [#301] react-querybuilder and the compatibility packages are all built with React v18 now (the peerDependencies version is still ">=16.8.0"). Previous 4.x versions were usable within React 18 applications, but now the build and tests explicitly use it.
• [#308] The CodeSandbox CI template is now located within the repository, and several other CodeSandbox-compatible examples have been added as well (see examples folder).