You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/intro.mdx
+5-11Lines changed: 5 additions & 11 deletions
Original file line number
Diff line number
Diff line change
@@ -8,22 +8,16 @@ import { SandpackRQB } from '../src/components/SandpackRQB';
8
8
To install `react-querybuilder`, use [npm](https://www.npmjs.com/package/react-querybuilder) or [Yarn](https://yarnpkg.com/package/react-querybuilder).
9
9
10
10
```bash
11
-
# npm
12
11
npm i react-querybuilder
13
-
```
14
-
15
-
or
16
-
17
-
```bash
18
-
# Yarn
12
+
# OR
19
13
yarn add react-querybuilder
20
14
```
21
15
22
16
## Basics
23
17
24
18
The simplest way to create a query builder is to render the `QueryBuilder` component with no props. (Be sure to import the official stylesheet, which is available in `.css` and `.scss` flavors.)
Functional, but not really useful. To really get value out of the query builder, we'll first need to define a set of fields for the user to choose from. We can pass the `fields` array into the query builder through the `fields` prop.
31
+
Functional, but not very useful. To really get value out of the query builder, we'll first need to define a set of fields for the user to choose from. We can pass the `fields` array into the query builder through the `fields` prop.
38
32
39
33
In the query builder below, click the "+Rule" button and then the fields selector to see the field choices.
40
34
41
-
<SandpackRQB>
35
+
<SandpackRQBoptions={{ editorHeight: 240 }}>
42
36
43
37
```tsx
44
38
importQueryBuilderfrom'react-querybuilder';
@@ -58,7 +52,7 @@ Much more useful, but you probably want to monitor and control what users do wit
58
52
59
53
The state variable `query` will be passed to the `query` prop, and the setter method `setQuery` will be used in the `onQueryChange` callback. Let's also seed the query object with a couple of rules, making sure that the `field` property of each rule matches the `name` property of one of our fields.
0 commit comments