Registry / database / react-sql-query-builder

react-sql-query-builder

library4.2.0jsnpmunverified

React SQL Query Builder is a React-based component for building SQL query conditions via a visual rule tree. Version 4.2.0 provides a simple API to initialize a query builder with rules, fields, and operators, generating SQL WHERE clauses. It is not a managed UI component but rather uses imperative initialization with a DOM ID. The library is lightweight with no external dependencies, but lacks TypeScript definitions, ESM support, and active maintenance (last release over 2 years ago). It competes with react-querybuilder but offers a simpler tree-based rule structure, though with less flexibility and community support.

database

npm install react-sql-query-builder

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-SQL-QUERY-BU

react-sql-query-builder

databasejavascriptv4.2.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

QueryBuilder

✓ import { QueryBuilder } from 'react-sql-query-builder'

✗ const QueryBuilder = require('react-sql-query-builder')

The package is ESM-only; CJS requires are not supported.

QueryBuilder

✓ new QueryBuilder()

✗ const queryBuilder = new queryBuilder.QueryBuilder()

Direct class instantiation, not a named export from a default.

queryBuilder.init()

✓ queryBuilder.init({ rules, fields, operators, id, handleChange })

✗ queryBuilder.init({ handleChange: handleChange }) without id

'id' is required to target a DOM element; omitting it will silently fail.

Shows how to import QueryBuilder, define rules/fields/operators, and initialize the builder on a DOM element.

import { QueryBuilder } from 'react-sql-query-builder'; const queryBuilder = new QueryBuilder(); const rules = [{ condition: 'AND', id: 0, rules: [{ id: 3, operator: 1, value: 9 }, { condition: 'OR', id: 9, rules: [{ id: 4, operator: 2, value: 'JAPAN' }] }] }]; const fields = [ { name: 'ID', id: 1 }, { name: 'Age', id: 3 }, { name: 'Nation', id: 4 } ]; const operators = [ { name: 'equal', id: 1, symbol: '=' }, { name: 'not equal', id: 2, symbol: '!=' } ]; document.body.innerHTML = '<div id="wrap"></div>'; queryBuilder.init({ rules, fields, operators, id: 'wrap', handleChange: (rules) => { console.log('Rules updated:', rules); } });

Debug

Known issues

gotchaThe 'id' option in init() must reference an existing DOM element. If the element is not present, the component will not render and no error is thrown.

fix

Ensure the target element exists in the DOM before calling queryBuilder.init().

affects: >=1.0.0

gotchaThe package does not export any React components. It is not a typical React component library; it uses imperative DOM manipulation.

fix

Use new QueryBuilder() and call init() instead of trying to use <QueryBuilder /> as a JSX component.

affects: >=1.0.0

deprecatedThe package has not been updated in over 2 years and is in maintenance mode. No new features or security fixes are expected.

fix

Consider migrating to react-querybuilder or another actively maintained alternative.

affects: >=4.0.0

gotchaOperator IDs are numeric but are not validated. Using an invalid ID may produce incorrect SQL without warning.

fix

Ensure operator IDs match the predefined set (1-12).

affects: >=1.0.0

gotchaThe 'value' field in rules should be a string or number; objects or arrays are not handled and may cause errors.

fix

Always pass primitive values for rule values.

affects: >=1.0.0

Errors

Common errors & fixes

Uncaught TypeError: queryBuilder.init is not a function

Attempted to call init() on an object that is not a QueryBuilder instance, possibly due to import mistake.

fix

Correct import: import { QueryBuilder } from 'react-sql-query-builder'; const qb = new QueryBuilder(); qb.init({...});

Warning: Failed prop type: The prop `id` is marked as required in `QueryBuilder`

Using the package as a React component (<QueryBuilder />) instead of imperative API.

fix

Do not import or use as JSX; use new QueryBuilder() and .init() instead.

Uncaught TypeError: Cannot read properties of null (reading 'appendChild')

The DOM element with the specified id does not exist when init() is called.

fix

Ensure the element is present (e.g., after render) before calling init().

Module not found: Can't resolve 'react-sql-query-builder'

Package not installed or import path is wrong.

fix

Run npm install react-sql-query-builder and use correct import path.

Upgrade

Version history

4.2.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/fridaymeng/react-sql-query-builder.git ↗

packagereact-sql-query-builder ↗

homepagehttps://github.com/fridaymeng/react-sql-query-builder.git ↗