React Awesome Query Builder

Theme by Ukrbublik

|

Updated: 22 May 2025

|

2103 Stars

User-friendly query builder for React

Categories

Overview

The npm package “react-awesome-query-builder” is a user-friendly React component that allows users to build queries or filters. It is inspired by jQuery QueryBuilder and supports various UI frameworks such as Ant Design, Material-UI, Bootstrap, and Fluent UI. The library offers highly configurable features and supports different types of fields, comparison operators, and RHS and LHS values. It also includes features like reordering, theme support, export/import functionality, TypeScript support, and server-side functionality. The package is divided into different packages based on the UI framework used, making it easy to install and use.

Features

• Highly configurable
• Supports different types of fields (simple, structs, custom types)
• Supports various comparison operators (binary, unary, complex)
• Reordering (drag-n-drop) support for rules and groups of rules
• Theme support for Ant Design, Material-UI, Bootstrap, Fluent UI, and vanilla
• Export to different formats (MongoDb, SQL, JsonLogic, SpEL, ElasticSearch, custom format)
• Import from JsonLogic and SpEL
• TypeScript support
• Save/load query value and config from the server

Installation

To install and use the react-awesome-query-builder package with Material-UI, follow these steps:

1. Install pnpm if not already installed:

npm install -g pnpm

2. Install the react-awesome-query-builder and Material-UI packages:

pnpm install @react-awesome-query-builder/ui @react-awesome-query-builder/mui

3. Import the necessary components and CSS:

import {
  Query,
  Builder,
  BasicConfig
} from "@react-awesome-query-builder/ui";
import "@react-awesome-query-builder/styles/css/compact.css";

4. Use the Query and Builder components in your React application:

const config = new BasicConfig([/* add your fields and operators here */]);

function App() {
  return (
    <Query config={config}>
      {(queryProps) => (
        <div>
          <Builder {...queryProps} />
          <pre>{JSON.stringify(queryProps.query, null, 2)}</pre>
        </div>
      )}
    </Query>
  );
}

export default App;

For more detailed usage examples and documentation, refer to the API and config and demo apps sections.

Summary

The react-awesome-query-builder package is a versatile and customizable React component that allows users to easily build queries or filters in their web applications. It offers support for various UI frameworks, highly configurable options, and different export/import formats. With its user-friendly interface and powerful features, it provides a convenient solution for implementing query building functionality in React applications.