@react-querybuilder/bootstrap 7.7.0 → 7.7.1-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +36 -20
  2. package/package.json +6 -6
package/README.md CHANGED
@@ -1,10 +1,10 @@
1
1
  ## @react-querybuilder/bootstrap
2
2
 
3
- Official [react-querybuilder](https://npmjs.com/package/react-querybuilder) components for [Bootstrap](https://getbootstrap.com/).
3
+ Official [react-querybuilder](https://npmjs.com/package/react-querybuilder) compatibility package for [Bootstrap](https://getbootstrap.com/).
4
4
 
5
- To see them in action, check out the [`react-querybuilder` demo](https://react-querybuilder.js.org/demo/bootstrap) or [load the example in CodeSandbox](https://githubbox.com/react-querybuilder/react-querybuilder/tree/main/examples/bootstrap).
6
-
7
- **[Full documentation](https://react-querybuilder.js.org/)**
5
+ - [Demo](https://react-querybuilder.js.org/demo/bootstrap)
6
+ - [Full documentation](https://react-querybuilder.js.org/)
7
+ - [CodeSandbox](https://react-querybuilder.js.org/sandbox?t=bootstrap) / [StackBlitz](https://react-querybuilder.js.org/sandbox?p=stackblitz&t=bootstrap) example projects
8
8
 
9
9
  ## Installation
10
10
 
@@ -15,40 +15,56 @@ npm i react-querybuilder @react-querybuilder/bootstrap bootstrap bootstrap-icons
15
15
 
16
16
  ## Usage
17
17
 
18
- To render Bootstrap-compatible components in the query builder, wrap the `<QueryBuilder />` element in `<QueryBuilderBootstrap />`.
18
+ To configure the query builder to use Bootstrap-compatible components, place `QueryBuilderBootstrap` above `QueryBuilder` in the component hierarchy.
19
19
 
20
20
  ```tsx
21
21
  import { QueryBuilderBootstrap } from '@react-querybuilder/bootstrap';
22
22
  import 'bootstrap-icons/font/bootstrap-icons.scss';
23
23
  import 'bootstrap/scss/bootstrap.scss';
24
- import { QueryBuilder, RuleGroupType } from 'react-querybuilder';
24
+ import { type Field, QueryBuilder, type RuleGroupType } from 'react-querybuilder';
25
25
 
26
- const fields = [
26
+ const fields: Field[] = [
27
27
  { name: 'firstName', label: 'First Name' },
28
28
  { name: 'lastName', label: 'Last Name' },
29
29
  ];
30
30
 
31
- const App = () => {
31
+ export function App() {
32
32
  const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });
33
33
 
34
34
  return (
35
35
  <QueryBuilderBootstrap>
36
- <QueryBuilder fields={fields} query={query} onQueryChange={setQuery} />
36
+ <QueryBuilder fields={fields} defaultQuery={query} onQueryChange={setQuery} />
37
37
  </QueryBuilderBootstrap>
38
38
  );
39
- };
39
+ }
40
40
  ```
41
41
 
42
- ## Notes
42
+ > [!NOTE]
43
+ >
44
+ > Some additional styling may be necessary. We recommend the following:
45
+ >
46
+ > ```css
47
+ > .queryBuilder .form-control,
48
+ > .queryBuilder .form-select {
49
+ > display: inline-block;
50
+ > width: auto;
51
+ > }
52
+ > ```
43
53
 
44
- - Some additional styling may be necessary, e.g.:
54
+ `QueryBuilderBootstrap` is a React context provider that assigns the following props to all descendant `QueryBuilder` elements. The props can be overridden on the `QueryBuilder` or used directly without the context provider.
45
55
 
46
- ```css
47
- .queryBuilder .form-control,
48
- .queryBuilder .form-select {
49
- display: inline-block;
50
- width: auto;
51
- }
52
- ```
56
+ | Export | `QueryBuilder` prop |
57
+ | ---------------------------- | ----------------------------- |
58
+ | `bootstrapControlClassnames` | `controlClassnames` |
59
+ | `bootstrapControlElements` | `controlElements` |
60
+ | `bootstrapTranslations` | `translations` |
61
+ | `BootstrapNotToggle` | `controlElements.notToggle` |
62
+ | `BootstrapValueEditor` | `controlElements.valueEditor` |
53
63
 
54
- - This package exports `bootstrapControlClassnames` and `bootstrapControlElements` which can be assigned directly to the `controlClassnames` and `controlElements` props, respectively, on `<QueryBuilder />` (each component is also exported individually). However, the recommended usage is to wrap a `<QueryBuilder />` element in `<QueryBuilderBootstrap />`.
64
+ > [!TIP]
65
+ >
66
+ > By default, this package uses icons from `bootstrap-icons` for button labels. To reset button labels to their default strings, use `defaultTranslations` from `react-querybuilder`.
67
+ >
68
+ > ```tsx
69
+ > <QueryBuilderBootstrap translations={defaultTranslations}>
70
+ > ```
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@react-querybuilder/bootstrap",
3
3
  "description": "Custom Bootstrap components for react-querybuilder",
4
- "version": "7.7.0",
4
+ "version": "7.7.1-rc.0",
5
5
  "publishConfig": {
6
6
  "access": "public"
7
7
  },
@@ -48,16 +48,16 @@
48
48
  "bootstrap-icons": "^1.11.3",
49
49
  "react": "^18.3.1",
50
50
  "react-dom": "^18.3.1",
51
- "react-querybuilder": "7.7.0",
51
+ "react-querybuilder": "7.7.1-rc.0",
52
52
  "rollup-plugin-visualizer": "^5.12.0",
53
- "typescript": "^5.6.2",
54
- "vite": "^5.4.8"
53
+ "typescript": "^5.6.3",
54
+ "vite": "^5.4.9"
55
55
  },
56
56
  "peerDependencies": {
57
57
  "bootstrap": ">=5",
58
58
  "bootstrap-icons": ">=1.7.0",
59
59
  "react": ">=18",
60
- "react-querybuilder": "7.7.0"
60
+ "react-querybuilder": "7.7.1-rc.0"
61
61
  },
62
- "gitHead": "3df83ee0fc7031f80802d798a77716fb1c1c364a"
62
+ "gitHead": "926c333065a2ad41d49b0732354bfdb76ac10ea1"
63
63
  }