@react-querybuilder/bulma

@react-querybuilder/bulma

Official react-querybuilder compatibility package for Bulma.

• Demo
• Full documentation
• CodeSandbox / StackBlitz example projects

Installation

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

Usage

To configure the query builder to use Bulma-compatible components, place QueryBuilderBulma above QueryBuilder in the component hierarchy.

import { QueryBuilderBulma } from '@react-querybuilder/bulma';
import { useState } from 'react';
import { type Field, QueryBuilder, type RuleGroupType } from 'react-querybuilder';

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

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

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

[!NOTE]

Some additional styling may be necessary. We recommend the following:

.queryBuilder .input {
  width: auto;
}

QueryBuilderBulma is a React context provider that assigns the following props to all descendant QueryBuilder elements. The props can be overridden on the QueryBuilder or used directly without the context provider.

Export	QueryBuilder prop
bulmaControlClassnames	controlClassnames
bulmaControlElements	controlElements
BulmaNotToggle	controlElements.notToggle
BulmaValueEditor	controlElements.valueEditor
BulmaValueSelector	controlElements.valueSelector

Changelog

[v8.2.0] - 2025-01-28

Added

• [#845] New formatQuery option operatorProcessor. Currently only applies to "sql", "parameterized", "parameterized_named", and "natural_language" formats.
• [#846] New formatQuery option preserveValueOrder. Preserves the order of values when exporting rules with "between"/"notBetween" operators, even if the larger value comes first.

Fixed

• [#844] The formatQuery "elasticsearch" export format now includes the .value property when outputting Painless scripts.
• [#845] formatQuery handles combinator and operator values case-insensitively.
• [#846] convertQuery, convertToIC, and convertFromIC now support the "xor" combinator, as does the "natural_language" export format.