@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.1.0] - 2025-01-09

Added

• [#820] New @react-querybuilder/datetime package with enhanced functionality for managing date/time data. Includes rule/value processors for formatQuery tailored to different database platforms and date/time libraries.
• [#820] formatQuery will assume a format of "sql" if no format is provided as long as preset matches one of the supported values.
• [#820] New formatQuery option wrapValueWith, an array of two strings to act as a prefix and suffix for values (outside of any quotes).
• [#820] formatQuery value processors now accept an optional context parameter, which can be used to pass additional information to the processor.
• [#820] New "mongodb_query" export format. This format is exactly the same as "mongodb" except it returns an actual JSON object instead of a JSON.stringifyd version. The "mongodb" format is deprecated, but will not be removed.
• [#820] Default SCSS stylesheet query-builder.scss now uses @use instead of the deprecated @import.
• [#834] React 19 support (verification only, no meaningful code changes were necessary).