Skip to content

Commit ab7cb6b

Browse files
committed
Use react-datepicker in "fallback" example instead of optgroups
1 parent 4c8b8e1 commit ab7cb6b

File tree

4 files changed

+297
-166
lines changed

4 files changed

+297
-166
lines changed

docs/intro.mdx

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,16 @@ import { SandpackRQB } from '../src/components/SandpackRQB';
88
To install `react-querybuilder`, use [npm](https://www.npmjs.com/package/react-querybuilder) or [Yarn](https://yarnpkg.com/package/react-querybuilder).
99

1010
```bash
11-
# npm
1211
npm i react-querybuilder
13-
```
14-
15-
or
16-
17-
```bash
18-
# Yarn
12+
# OR
1913
yarn add react-querybuilder
2014
```
2115

2216
## Basics
2317

2418
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.)
2519

26-
<SandpackRQB>
20+
<SandpackRQB options={{ editorHeight: 160 }}>
2721

2822
```tsx
2923
import QueryBuilder from 'react-querybuilder';
@@ -34,11 +28,11 @@ export default () => <QueryBuilder />;
3428

3529
</SandpackRQB>
3630

37-
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.
3832

3933
In the query builder below, click the "+Rule" button and then the fields selector to see the field choices.
4034

41-
<SandpackRQB>
35+
<SandpackRQB options={{ editorHeight: 240 }}>
4236

4337
```tsx
4438
import QueryBuilder from 'react-querybuilder';
@@ -58,7 +52,7 @@ Much more useful, but you probably want to monitor and control what users do wit
5852

5953
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.
6054

61-
<SandpackRQB>
55+
<SandpackRQB options={{ editorHeight: 480 }}>
6256

6357
```tsx
6458
import { useState } from 'react';

0 commit comments

Comments
 (0)