@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.

Full documentation

Installation

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

Usage

To render Bulma-compatible components in the query builder, wrap the <QueryBuilder /> element in <QueryBuilderBulma />.

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

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

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

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

Notes

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

  .queryBuilder .input {
    width: auto;
  }
  

• This package exports bulmaControlElements which can be assigned directly to the controlElements prop on <QueryBuilder /> (and also exports each component individually), but wrapping <QueryBuilder /> in <QueryBuilderBulma /> is the recommended method.

Changelog

[v7.4.0] - 2024-05-27

Changed

• [#703] The independentCombinators property has been removed from the InlineCombinatorProps interface. The value can be still be retrieved from the schema prop.
• [#703] Distributed CSS files are compressed (comments and unnecessary whitespace removed).

Added

• [#699] Most properties of the controlElements prop can be set to null. Properties set to null will be rendered as () => null.

Fixed

• [#700] parseCEL no longer creates a rule group with not: true when parsing a single rule in a negated parenthetical group. Instead, the rule operator is inverted.
• [#703] When enableDragAndDrop is true and a rule or group is dragged over an inline combinator (such as generated when showCombinatorsBetweenRules is enabled or the query uses independent combinators), the "drop location" indicator (a dashed, purple line by default) will appear above the inline combinator. Previously the styles placed the indicator line below the inline combinator, which could be misleading, particularly for independent combinators.