@react-querybuilder/bootstrap
Official react-querybuilder components for Bootstrap.
To see them in action, check out the react-querybuilder demo or load the example in CodeSandbox.
Installation
npm i --save react-querybuilder @react-querybuilder/bootstrap bootstrap bootstrap-icons
# OR
yarn add react-querybuilder @react-querybuilder/bootstrap bootstrap bootstrap-iconsUsage
import {
bootstrapControlClassnames,
bootstrapControlElements,
} from '@react-querybuilder/bootstrap';
import { QueryBuilder, RuleGroupType } from 'react-querybuilder';
import 'bootstrap/scss/bootstrap.scss';
const fields = [
{ name: 'firstName', label: 'First Name' },
{ name: 'lastName', label: 'Last Name' },
];
const App = () => {
const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });
return (
<QueryBuilder
fields={fields}
query={query}
onQueryChange={q => setQuery(q)}
controlClassnames={bootstrapControlClassnames}
controlElements={bootstrapControlElements}
/>
);
};Some additional styling may be necessary, e.g.:
.queryBuilder .form-control,
.queryBuilder .form-select {
display: inline-block;
width: auto;
}