Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/react-querybuilder/react-querybuilder

The Query Builder component for React
https://github.com/react-querybuilder/react-querybuilder

builder component custom mongodb query query-builder querybuilder react rule-builder sql

Last synced: 26 days ago
JSON representation

The Query Builder component for React

Host: GitHub
URL: https://github.com/react-querybuilder/react-querybuilder
Owner: react-querybuilder
License: mit
Created: 2016-06-17T22:03:19.000Z (over 8 years ago)
Default Branch: main
Last Pushed: 2024-05-22T23:08:21.000Z (6 months ago)
Last Synced: 2024-05-23T00:24:26.760Z (6 months ago)
Topics: builder, component, custom, mongodb, query, query-builder, querybuilder, react, rule-builder, sql
Language: TypeScript
Homepage: https://react-querybuilder.js.org/
Size: 79.1 MB
Stars: 1,055
Watchers: 11
Forks: 239
Open Issues: 21
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        # React Query Builder

[![npm][badge-npm]](https://www.npmjs.com/package/react-querybuilder)

[![Demo][badge-demo]](https://react-querybuilder.js.org/demo)

[![Docs][badge-docs]](https://react-querybuilder.js.org/)

[![Learn from the maintainer][badge-training]](https://www.newline.co/courses/building-advanced-admin-reporting-in-react)

[![Chat][badge-discord]](https://react-querybuilder.js.org/discord)

[![CI][badge-ci]](https://github.com/react-querybuilder/react-querybuilder/actions/workflows/main.yml)

[![codecov.io][badge-codecov]][codecov-link]

[![All Contributors][badge-all-contributors]](#contributors-)

**React Query Builder** is a fully customizable query builder component for React, along with a collection of utility functions for [importing from](https://react-querybuilder.js.org/docs/utils/import), and [exporting to](https://react-querybuilder.js.org/docs/utils/export), various query languages like SQL, MongoDB, and more. Demo is [here](https://react-querybuilder.js.org/demo).

_**Complete documentation is available at [react-querybuilder.js.org](https://react-querybuilder.js.org)**._

![Screenshot](_assets/screenshot.png)

## Getting started

To get started, import the main component and the default stylesheet, then render the component in your app:

```tsx

import { QueryBuilder } from 'react-querybuilder';

import 'react-querybuilder/dist/query-builder.css'; // or .scss

export function App() {

  const [query, setQuery] = useState({

    combinator: 'and',

    rules: [],

  });

  return ;

}

```

For a more complete introduction, see the [main package README](packages/react-querybuilder/README.md), dive into the [full documentation](https://react-querybuilder.js.org/docs/intro), or browse the [example projects](./examples/).

To enable drag-and-drop functionality, use the [`@react-querybuilder/dnd` package](packages/dnd).

_For instructions on migrating from earlier versions of `react-querybuilder`, [click here](https://react-querybuilder.js.org/docs/migrate)._

## Compatibility packages

[![Ant Design](https://img.shields.io/badge/RQB-for_Ant%20Design-blue?logo=antdesign&color=0958d9)](https://www.npmjs.com/package/@react-querybuilder/antd)

[![Bootstrap](https://img.shields.io/badge/RQB-for_Bootstrap-blue?logo=bootstrap&color=712cf9)](https://www.npmjs.com/package/@react-querybuilder/bootstrap)

[![Bulma](https://img.shields.io/badge/RQB-for_Bulma-blue?logo=bulma&color=00d1b2)](https://www.npmjs.com/package/@react-querybuilder/bulma)

[![Chakra UI](https://img.shields.io/badge/RQB-for_Chakra%20UI-blue?logo=chakraui&color=81e6d9)](https://www.npmjs.com/package/@react-querybuilder/chakra)


[![Fluent UI](https://img.shields.io/badge/RQB-for_Fluent%20UI-blue?logo=fluentui&color=7fba00)](https://www.npmjs.com/package/@react-querybuilder/fluent)

[![Mantine](https://img.shields.io/badge/RQB-for_Mantine-blue?logo=mantine&color=339af0)](https://www.npmjs.com/package/@react-querybuilder/mantine)

[![MUI](https://img.shields.io/badge/RQB-for_MUI-blue?logo=mui&color=007FFF)](https://www.npmjs.com/package/@react-querybuilder/material)

[![React Native](https://img.shields.io/badge/RQB-for_React_Native-blue?logo=react&color=61dafb)](https://www.npmjs.com/package/@react-querybuilder/native)

[![Tremor](https://img.shields.io/badge/RQB-for_Tremor-blue?logo=tremor&color=60a5fa)](https://www.npmjs.com/package/@react-querybuilder/tremor)

In addition to the main [`react-querybuilder`](https://www.npmjs.com/package/react-querybuilder) package, this repo also hosts official compatibility component packages for use with several popular style libraries including [Ant Design](https://www.npmjs.com/package/@react-querybuilder/antd), [Bootstrap](https://www.npmjs.com/package/@react-querybuilder/bootstrap), [Bulma](https://www.npmjs.com/package/@react-querybuilder/bulma), [Chakra UI](https://www.npmjs.com/package/@react-querybuilder/chakra), [Fluent UI](https://www.npmjs.com/package/@react-querybuilder/fluent), [Mantine](https://www.npmjs.com/package/@react-querybuilder/mantine), [MUI](https://www.npmjs.com/package/@react-querybuilder/material), and [Tremor](https://www.npmjs.com/package/@react-querybuilder/tremor). A functionally equivalent [React Native-compatible component](https://www.npmjs.com/package/@react-querybuilder/native) is also available.

## Development

See [the contribution guidelines](./CONTRIBUTING.md).

## Credits

This component was inspired by prior work from:

- [jQuery QueryBuilder](http://querybuilder.js.org/)

- [Angular QueryBuilder](https://github.com/mfauveau/angular-query-builder)

- [React Awesome Query Builder](https://github.com/ukrbublik/react-awesome-query-builder)

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    

      
_{Jake Boone}
💻 📖 🚧 ⚠️

      
_{Pavan Podila}
💻 📖 ⚠️

      
_{Andrew Turgeon}
💻 ⚠️

      
_{André Drougge}
💻 ⚠️

      
_{Oumar Sharif DAMBABA}
💻

      
_{Arte Ebrahimi}
💻 📖 ⚠️

      
_{Carlos Azuaje}
💻

    

    

      
_{Srinivas Damam}
💻

      
_{Matthew Reishus}
📖

      
_{Anish Duwal}
💻 ⚠️

      
_{RomanLamsal1337}
💻

      
_{Dmitriy Kolesnikov}
💻

      
_{Vitor Barbosa}
💻

      
_{Laxminarayana}
💻 📖

    

    

      
_{Christian Mund}
💻 📖

      
_{Dallas Larsen}
💻

      
_{Ayush Srivastava}
📖

      
_{Fabio Espinosa}
💻 📖 ⚠️

      
_{Anatoly Bubenkov}
💻 📖 ⚠️

      
_{Saurabh Nemade}
💻 ⚠️

      
_{Edwin Xavier}
💻 📖

    

    

      
_{Code Monk}
💻 📖 ⚠️

      
_ZigZagT
💻

      
_mylawacad
💻

      
_{Kyrylo Stepanchuk}
💻

      
_{Kasey Culmback}
💻

      
_{Ahmed Fasih}
💻

      
_{Austin Stowe}
💻

    

    

      
_Manuel
📖

      
_{Victor Arowo}
📖

      
_{Ekin Koc}
💻

      
_{Zach Blume}
💻

      
_王恒
📖

      
_{Jan Bednář}
💻 ⚠️

      
_{Stephen Peery}
💻 ⚠️

    

    

      
_stil
💻 ⚠️

      
_{Chiawei Ong}
💻 ⚠️

      
_{De Lille Felix}
💻 ⚠️

      
_{Raphaël Bideau}
💻

    

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

[badge-all-contributors]: https://img.shields.io/badge/all_contributors-39-orange.svg

[badge-demo]: https://img.shields.io/badge/demo-blue.svg?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAHYAAAB2AH6XKZyAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAA7JJREFUWIW1ld9PW2UYx7/P6ZHhVrMFcAQBQWHuB5h17sKpGTaBocRFK+yCxCwmaozxL/DO7c4rYyIXS7xaTIwaHZsyAu3KoKXQbMlW2Jjlx5RKC7RCW9qChZ5zHi9mk42+3dpy+lyez/Oez5P3fZ/3oZ6JmJ/BCooUE3enjE7XWLmINTa8uCQzWCGiumLI/1lZwbj7RjbsMbe0XJWKIQaAzeQm+gdtUFTB5hLCkLiztOQppSgFMDMG7XbE4nER1sDSB4f9rr8AQCaQzMw+PQsYdbv3+Rb8e0XspcYDw+2t5hPAxydAZCaLxaKnG97qk6eZ+QqAjN1lRt9MZeI9i8ejpb/pegSzz7U0MvP3Qjkwt7XLcPZhOQBQz0RslKHtuA1TKVX6+dKlY5HomnE7IwNrBzt9t5+pWU88UhSRLDO4hkjacRuOuByIRNeErL5tUTLWrh/nDMI+XY5g8s4UvNMzQrb/2CrKm6JZ1+64gOVgCE63W8j2VG2gtiX42PUygfzM2nwh8kRivaRvYOAVTVV3bWeGUnWroSNwS5J4E5l7D+DBHSi4DaMmk7wU2nMNoDcFWCGW2g4tOUae9J+Cj2AxZPwqixwEfJGLHHjQhnlPw9m5+7utQ0PPsmBrKyrKvd1dZ34CtEyYYSdz3tMwEo3iutMJkRzAdDASf9X+5dlYLv9qPX/xnJyrGABSKQX9Vhu2tlIinFBVdDYvDuUkT0fOd4AZuDY8jHA4IsRg+qg5OHovHzkAyEQ0wMylT0p0uMaa5+7/eVzE6p+vGz/d0d4EfNKUbwE5taG35g0za2QDkHlkjOGqysSpfR5PQfOEvr0TNz8uYcE3X9ZntX2nKlpZxmIDhw+84/90b8PaaiFyAJDB/CMBlSKoaRpu3pqAqmS2FEmMg2fmy4zVG78wqFB/UAJzMht1jo1jcXlZyGrNyzBWbxQqTkcyaxfMzM5h8u6UkJUdXsN+U3incgCABKKMDlgNh2EfcQgXPF2RRH1bQBc5gFIZRN0PP2rBlZCxt/f3C4qiVG/PJkKiyhT5zCBrgWwTLt94pA0vX+6lQ59//SuD3xfkMhN3HQm4evVR/19Az2TsQvohGnI4j977w2sSJTa8UO/oaD91XU85AMjM/DYR1S0EAvB6p7Pl2ftvaG+VuD5U9ZS3nr94TgKARDyBQZsdmmjEEf3NCrotqR90ladDUhSFrlqt+DcpfA6SIOo6EhpdKYYcAOjdb66sT8/M7hbBoy83/3by9dduF0sOIvN/iyuX1reeUXwAAAAASUVORK5CYII=

[badge-docs]: https://img.shields.io/badge/📖_documentation-blue.svg

[badge-npm]: https://img.shields.io/npm/v/react-querybuilder.svg?cacheSeconds=3600&logo=npm&logoColor=%23CB3837

[badge-training]: https://img.shields.io/badge/training-blue.svg?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAEIAAABCAFpWn9CAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAgdJREFUKJGNkb9rE2EYxz/33l0uubTXwYSLwWroIgoWIUqoBUF0KS4HQkAKkqndtDi5mLb/h4sGIUOwQkDIkoAiblo0ASXEwSKVYEtKk+Zi877nYmNLsfjdngc+3+/zQ3NdN+q67rNYLHZFKSX4t/bbPzbrkc9f7kx63j7T09Olfr8f/I/KL1+ou5nJp57nIeLxeDocDjMYDAiC4IRAuH7jpiZCodsAQgihA8zOzlIul08EhRBEjeDU2qU3V0c7LS4uks/nR6mdTodms0m9XqfRaBwxUEK7PwJzuRzdbpdSqQRApVIhk8mwsLBAOp1mZ2fnLxmQHYGmaZLP51lZWUFKiWmaJBIJarUag8GAdrv9h0EBIRFCjx7A8/PzKKUoFosYhoFSCsuyjozZhy6AMJH6QVPXdZaXl1ldXcW2bZLJJABTU1OYpgmAFR3awFCgadphx2w2i23bbGxsUK1WAWi1WqRSKQA0HYOo/GQEUh47eaFQIBKJHHtHr9cjainU2X5KP+84ufFEIhZ3XXzfx/d9HMfBtu1R7fs+nU6HpUcP1L3L68Mzroxor+bmnMb2dqspZUwGBD/luZ6hRcaGmhx+C4ekJgxLiq1dJjfHQ9cmeJL6+PrCcGtc8zyPNdO8uC/le8DqBae/fvi1lATC6xNj76oxZwZg79bjt9L5PhNXe7Xnu5WHvwH2M+1kJKUCQwAAAABJRU5ErkJggg==

[badge-ci]: https://github.com/react-querybuilder/react-querybuilder/actions/workflows/main.yml/badge.svg

[badge-codecov]: https://codecov.io/gh/react-querybuilder/react-querybuilder/branch/main/graph/badge.svg?token=AeYWGCFJO0

[codecov-link]: https://codecov.io/gh/react-querybuilder/react-querybuilder

[badge-discord]: https://img.shields.io/badge/discord-blue.svg?logo=discord&logoColor=white