@kittlekit/query-builder-react

React state orchestration for Kittlekit query builder packages.

What This Package Is

Use this package when you want:

• React-managed query-builder state
• nested group/condition updates
• output generation wired to React hooks

This package does not render UI. It sits between:

• @kittlekit/query-builder-core
• @kittlekit/query-builder-tailwind

Install

npm install @kittlekit/query-builder-react @kittlekit/query-builder-core react react-dom

Quick Start

import { useQueryBuilder } from "@kittlekit/query-builder-react"

const {
  query,
  addCondition,
  updateCondition,
  buildFilterOutput,
} = useQueryBuilder(fields)

Main Export

useQueryBuilder(fields, options?)

Returns:

• query
• setQuery
• updateCondition
• addCondition
• removeCondition
• addGroup
• removeGroup
• toggleGroupLogic
• clearQuery
• buildFilterOutput
• hasConditions

When to Use It

Use this package if:

• you want to render your own query UI
• you want to keep query-builder state independent from any visual kit
• you want to plug the state machine into another renderer

Relationship to Other Packages

query-builder-core -> query-builder-react -> query-builder-tailwind

Publish

npm run build --workspace @kittlekit/query-builder-react
npm publish --workspace @kittlekit/query-builder-react --access public

Examples

• smoke app: sandbox/query-builder-smoke
• app wrapper reference: web/src/components/queryBuilder/QueryBuilder.tsx

Release Notes

0.1.0

• first public extraction of React query-builder state orchestration