Skip to content

Commit d3737e5

Browse files
kevalbhattkevalbhatt
committed
Doc updated
1 parent dc6d1f8 commit d3737e5

File tree

13 files changed

+329
-101
lines changed

13 files changed

+329
-101
lines changed

‎.npmignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ node_modules
88
build
99
.rpt2_cache
1010

11+
# doc
12+
docs
13+
1114
# misc
1215
.DS_Store
1316
.env

‎doc/index.mdx

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎doc/.babelrc renamed to ‎docs/.babelrc

File renamed without changes.

‎doc/.gitignore renamed to ‎docs/.gitignore

File renamed without changes.

‎doc/package-lock.json renamed to ‎docs/package-lock.json

File renamed without changes.

‎doc/package.json renamed to ‎docs/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
"description": "",
55
"main": "index.js",
66
"scripts": {
7-
"docz:dev": "docz dev",
8-
"docz:build": "docz build"
7+
"dev": "docz dev",
8+
"build": "docz build"
99
},
1010
"author": "",
1111
"license": "ISC",

‎docs/resources/gettingstarted.mdx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
name: Getting Started
3+
route: /gettingstarted
4+
---
5+
6+
import { Playground } from 'docz';
7+
import ReactStructuredQuerySearch from 'react-structured-query-search';
8+
9+
# Getting Started
10+
11+
## Installation
12+
13+
```bash
14+
npm install --save react-structured-query-search
15+
```
16+
17+
## Usage
18+
19+
If you want to use `Tokenizer` then you either import as follows:
20+
21+
```jsx
22+
import ReactStructuredQuerySearch from "react-structured-query-search";
23+
```
24+
25+
#### or
26+
27+
```jsx
28+
import {Tokenizer} from "react-structured-query-search";
29+
```
30+
---
31+
32+
If you want to use `Typeahead` then you have to import as follows:
33+
34+
```jsx
35+
import {Typeahead} from "react-structured-query-search";

‎docs/resources/introduction.mdx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
name: Introduction
3+
route: /
4+
---
5+
6+
# Introduction
7+
8+
[![NPM](https://img.shields.io/npm/v/react-structured-query-search.svg)](https://www.npmjs.com/package/react-structured-query-search) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
9+
10+
react-structured-query-search is a javascript library that provides autocomplete search queries.
11+
This was inspired by [visualsearch](http://documentcloud.github.io/visualsearch) and
12+
[react-structured-filter](https://github.com/SummitRoute/react-structured-filter)
13+
14+
>This plugin is written on top of [react-structured-filter](https://github.com/SummitRoute/react-structured-filter), which has been revamped to add React 16 support and the existing code has been overriden to support New features.
15+
16+
You can use all the [react-typeahead](https://github.com/fmoo/react-typeahead), [react-structured-filter](https://github.com/SummitRoute/react-structured-filter) API(options) as they are.
17+
18+
## 🎉🎊 New Features 🎊🎉
19+
20+
* Ajax support to retrieve values.
21+
* Allows user to send values for Category in `Array<String>` or `Array<Object>`
22+
* Allows user to pass custom loader component.
23+
* Allows user to customize the header of dropdown (categories, operators, values).
24+
* Allows user to enable/disable operators in search.
25+
* Allows user to perform category-value search without operator (if isAllowOperator is false).
26+
* Switch between unique/duplicate categories (key).
27+
* Switch between unique/duplicate values
28+
* Allows user to send custom operators list.
29+
* Allows user to render custom tag(token) Component or the tag(token) Item.
30+
* Allows user to update Options(props) on runtime.

‎docs/resources/props.mdx

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
---
2+
name: Props
3+
route: /Props
4+
---
5+
6+
import { Playground } from "docz";
7+
import ReactStructuredQuerySearch from "react-structured-query-search";
8+
9+
# Props
10+
11+
## categoryHeader
12+
13+
<Playground>
14+
<ReactStructuredQuerySearch
15+
categoryHeader="Custom Category"
16+
options={[
17+
{
18+
category: "Country",
19+
type: "textoptions",
20+
options: ["India", "London"]
21+
}
22+
]}
23+
onTokenAdd={val => console.log(val)}
24+
/>
25+
</Playground>
26+
27+
## operatorHeader
28+
29+
<Playground>
30+
<ReactStructuredQuerySearch
31+
operatorHeader="Custom Operator"
32+
options={[
33+
{
34+
category: "Country",
35+
type: "textoptions",
36+
options: ["India", "London"]
37+
}
38+
]}
39+
onTokenAdd={val => console.log(val)}
40+
/>
41+
</Playground>
42+
43+
## valueHeader
44+
45+
<Playground>
46+
47+
<ReactStructuredQuerySearch
48+
valueHeader="Custom Value"
49+
options={[{
50+
category: "Country",
51+
type: "textoptions",
52+
options: ["India","London"]
53+
}]}
54+
onTokenAdd={val => console.log(val)}
55+
/>
56+
57+
</Playground>
58+
59+
## isAllowOperator
60+
61+
<Playground>
62+
63+
<ReactStructuredQuerySearch
64+
isAllowOperator={true}
65+
options={[{
66+
category: "Industry",
67+
type: "textoptions",
68+
options: ()=>{
69+
return ["Business Services", "Other Specialty Stores"]
70+
}
71+
}]}
72+
onTokenAdd={val => console.log(val)}
73+
/>
74+
75+
</Playground>
76+
77+
## loadingRender
78+
79+
<Playground>
80+
81+
<ReactStructuredQuerySearch
82+
loadingRender={()=><span>"Custom Loading..."</span>}
83+
options={[{
84+
category: "Industry",
85+
type: "textoptions",
86+
options: ()=>{
87+
return ["Business Services", "Other Specialty Stores"]
88+
}
89+
}]}
90+
onTokenAdd={val => console.log(val)}
91+
/>
92+
93+
</Playground>
94+
95+
## fuzzySearchEmptyMessage
96+
97+
<Playground>
98+
99+
<ReactStructuredQuerySearch
100+
fuzzySearchEmptyMessage="Custom Empty Message"
101+
options={[{
102+
category: "Industry",
103+
type: "textoptions",
104+
options: ()=>{
105+
return ["Business Services", "Other Specialty Stores"]
106+
}
107+
}]}
108+
onTokenAdd={val => console.log(val)}
109+
/>
110+
111+
</Playground>
112+
113+
## updateOptions
114+
115+
<Playground>
116+
117+
<ReactStructuredQuerySearch
118+
updateOptions={()=>{}}
119+
options={[{
120+
category: "Industry",
121+
type: "textoptions",
122+
options: ()=>{
123+
return ["Business Services", "Other Specialty Stores"]
124+
}
125+
}]}
126+
onTokenAdd={val => console.log(val)}
127+
/>
128+
129+
</Playground>
130+
131+
## renderTokens
132+
133+
<Playground>
134+
135+
<ReactStructuredQuerySearch
136+
options={[{
137+
category: "Industry",
138+
type: "textoptions",
139+
options: ()=>{
140+
return ["Business Services", "Other Specialty Stores"]
141+
}
142+
}]}
143+
onTokenAdd={val => console.log(val)}
144+
/>
145+
146+
</Playground>
147+
148+
## renderTokenItem
149+
150+
<Playground>
151+
152+
<ReactStructuredQuerySearch
153+
options={[{
154+
category: "Industry",
155+
type: "textoptions",
156+
options: ()=>{
157+
return ["Business Services", "Other Specialty Stores"]
158+
}
159+
}]}
160+
onTokenAdd={val => console.log(val)}
161+
/>
162+
163+
</Playground>
164+
165+
## renderSearchItem
166+
167+
<Playground>
168+
169+
<ReactStructuredQuerySearch
170+
options={[{
171+
category: "Industry",
172+
type: "textoptions",
173+
options: ()=>{
174+
return ["Business Services", "Other Specialty Stores"]
175+
}
176+
}]}
177+
onTokenAdd={val => console.log(val)}
178+
/>
179+
180+
</Playground>

‎doczrc.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1-
export default {
2-
base: '/react-structured-query-search/'
3-
}
1+
module.exports = {
2+
title: "React Structured Query Search",
3+
themeConfig: {
4+
showPlaygroundEditor: true
5+
},
6+
base: "/react-structured-query-search/",
7+
menu: ["Introduction", "Getting Started", "Props"]
8+
};

0 commit comments

Comments
 (0)