react-querybuilder:基于 React 生态的查询构建器组件项目

The Query Builder component for React

分支24Tags253
文件最后提交记录最后更新时间
21 天前
4 个月前
1 年前
22 天前
20 天前
29 天前
19 天前
19 天前
1 个月前
1 年前
2 年前
21 天前
4 个月前
29 天前
7 个月前
21 天前
19 天前
2 个月前
3 年前
2 个月前
2 年前
1 个月前
19 天前
19 天前
22 天前
4 个月前
19 天前
8 个月前
30 天前
30 天前
1 年前
1 个月前
30 天前
30 天前
4 个月前

React Query Builder

npm Demo Docs 向维护者学习 聊天

CI codecov.io 所有贡献者 pkg.pr.new

React Query Builder 是一个完全可定制的 React 查询构建器组件,同时包含一系列实用函数,支持从多种查询语言(如 SQL、MongoDB 等)导入以及向这些语言导出。演示地址为 这里

完整文档请访问 react-querybuilder.js.org

截图

快速开始

要开始使用,导入主组件和默认样式表,然后在应用中渲染该组件:

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 <QueryBuilder defaultQuery={query} onQueryChange={setQuery} />;
}

如需更全面的介绍,请参阅主包 README,深入了解完整文档,或浏览示例项目

Tip

要启用拖放功能,请使用 @react-querybuilder/dnd

如需增强的日期/时间支持,请使用 @react-querybuilder/datetime

要在规则中启用表达式,请使用 @react-querybuilder/expr

如需规则引擎功能(if-then-else),请使用 @react-querybuilder/rules-engine

有关从早期版本的 react-querybuilder 迁移的说明,请参阅版本迁移指南。要从 react-awesome-query-builder 迁移,请参阅RAQB 迁移指南

兼容性包

Ant Design Bootstrap Bulma Chakra UI Fluent UI
Mantine MUI PrimeReact React Native Tremor

除了主要的 react-querybuilder 包外,此仓库还托管了官方兼容性组件包,可用于多个流行的样式库,包括 Ant DesignBootstrapBulmaChakra UIFluent UIMantineMUIPrimeReactTremor。同时还提供了一个 React Native 组件

开发

详见贡献指南

致谢

本组件的开发灵感来源于以下项目:

贡献者 ✨

感谢以下各位的辛勤付出(表情符号说明):

Jake Boone
Jake Boone

💻 📖 🚧 ⚠️
Pavan Podila
Pavan Podila

💻 📖 ⚠️
Andrew Turgeon
Andrew Turgeon

💻 ⚠️
André Drougge
André Drougge

💻 ⚠️
Oumar Sharif DAMBABA
Oumar Sharif DAMBABA

💻
Arte Ebrahimi
Arte Ebrahimi

💻 📖 ⚠️
Carlos Azuaje
Carlos Azuaje

💻
Srinivas Damam
Srinivas Damam

💻
Matthew Reishus
Matthew Reishus

📖
Anish Duwal
Anish Duwal

💻 ⚠️
RomanLamsal1337
RomanLamsal1337

💻
Dmitriy Kolesnikov
Dmitriy Kolesnikov

💻
Vitor Barbosa
Vitor Barbosa

💻
Laxminarayana
Laxminarayana

💻 📖
Christian Mund
Christian Mund

💻 📖
Dallas Larsen
Dallas Larsen

💻
Ayush Srivastava
Ayush Srivastava

📖
Fabio Espinosa
Fabio Espinosa

💻 📖 ⚠️
Anatoly Bubenkov
Anatoly Bubenkov

💻 📖 ⚠️
Saurabh Nemade
Saurabh Nemade

💻 ⚠️
Edwin Xavier
Edwin Xavier

💻 📖
Code Monk
Code Monk

💻 📖 ⚠️
ZigZagT
ZigZagT

💻
mylawacad
mylawacad

💻
Kyrylo Stepanchuk
Kyrylo Stepanchuk

💻
Kasey Culmback
Kasey Culmback

💻
Ahmed Fasih
Ahmed Fasih

💻
Austin Stowe
Austin Stowe

💻
Manuel
Manuel

📖
Victor Arowo
Victor Arowo

📖
Ekin Koc
Ekin Koc

💻
Zach Blume
Zach Blume

💻
王恒
王恒

📖
Jan Bednář
Jan Bednář

💻 ⚠️
Stephen Peery
Stephen Peery

💻 ⚠️
stil
stil

💻 ⚠️
Chiawei Ong
Chiawei Ong

💻 ⚠️
De Lille Felix
De Lille Felix

💻 ⚠️
Raphaël Bideau
Raphaël Bideau

💻
Dave Anderson
Dave Anderson

💻
Roman Ogoreltsev
Roman Ogoreltsev

💻 ⚠️
Abdullah Ebrahim
Abdullah Ebrahim

💻
sajov
sajov

💻 ⚠️
yywing
yywing

💻

该项目遵循All Contributors规范。欢迎任何形式的贡献!

Anthony Sosso
Anthony Sosso

💻 ⚠️ Andrés Reyes Monge
Andrés Reyes Monge

💻 ⚠️ Mary McGrath
Mary McGrath

💻 ⚠️ Robert Krause
Robert Krause

💻 ⚠️

本项目遵循 all-contributors 规范。欢迎任何形式的贡献!

项目介绍

React 查询构建器组件【此简介由AI生成】

定制我的领域
101.73 K311访问 GitHub