Skip to content

Commit 141ff75

Browse files
dev-javascriptdev-javascript
committed
update examples
1 parent 4211195 commit 141ff75

File tree

5 files changed

+136
-24
lines changed

5 files changed

+136
-24
lines changed

‎example/stories/constant-suggestions-list/README.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
```jsx
2+
import React, {useState} from 'react';
3+
import ReactCustomSearchList from 'react-custom-search-list';
4+
import 'react-custom-search-list/style/react-custom-search-list.css';
5+
function App() {
6+
const [value, setValue] = useState('');
7+
return (
8+
<ReactCustomSearchList
9+
value={value}
10+
onChange={(e) => setValue(e.target.value)}
11+
onClear={() => setValue('')}
12+
fullWidth
13+
corner>
14+
{/**Render your suggestions list here*/}
15+
<ul>
16+
<li>
17+
<button onClick={() => setValue('Option A')}>Option A</button>
18+
</li>
19+
<li>
20+
<button onClick={() => setValue('Option B')}>Option B</button>
21+
</li>
22+
<li>
23+
<a href="https://github.com/dev-javascript/react-custom-search-list" target="_blank">
24+
Github Link
25+
</a>
26+
</li>
27+
<li>
28+
<a href="https://www.npmjs.com/package/react-custom-search-list" target="_blank">
29+
NPM Link
30+
</a>
31+
</li>
32+
</ul>
33+
</ReactCustomSearchList>
34+
);
35+
}
36+
<App />;
37+
```

‎example/stories/simple-manipulation/README.md renamed to ‎example/stories/dynamic-suggestions-list/README.md

+15-17
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,28 @@
22
import React, {useState} from 'react';
33
import ReactCustomSearchList from 'react-custom-search-list';
44
import 'react-custom-search-list/style/react-custom-search-list.css';
5+
6+
const items = ['Item A', 'Item B', 'Item C', 'Item D'];
7+
58
function App() {
69
const [value, setValue] = useState('');
710
return (
811
<ReactCustomSearchList
9-
fullWidth={false}
1012
value={value}
11-
corner={false}
12-
theme="panel"
1313
onChange={(e) => setValue(e.target.value)}
14-
onClear={() => setValue('')}>
14+
onClear={() => setValue('')}
15+
fullWidth
16+
corner>
1517
{/**Render your suggestions list here*/}
16-
<ul>
17-
<li>
18-
<button
19-
id="ccc"
20-
onClick={() => {
21-
console.log('button click');
22-
}}>
23-
Option A
24-
</button>
25-
</li>
26-
<li>Option B</li>
27-
<li>Option C</li>
28-
</ul>
18+
{value
19+
? items
20+
.filter((item) => item.toLowerCase().includes(value.toLowerCase()))
21+
.map((item) => (
22+
<div key={item} style={{margin: '5px'}}>
23+
<p onClick={() => setValue(item)}>{item}</p>
24+
</div>
25+
))
26+
: null}
2927
</ReactCustomSearchList>
3028
);
3129
}

‎example/stories/panel-theme/README.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
```jsx
2+
import React, {useState} from 'react';
3+
import ReactCustomSearchList from 'react-custom-search-list';
4+
import 'react-custom-search-list/style/react-custom-search-list.css';
5+
function App() {
6+
const [value, setValue] = useState('');
7+
return (
8+
<ReactCustomSearchList
9+
value={value}
10+
onChange={(e) => setValue(e.target.value)}
11+
onClear={() => setValue('')}
12+
theme="panel"
13+
fullWidth
14+
corner>
15+
{/**Render your suggestions list here*/}
16+
<ul>
17+
<li>
18+
<button onClick={() => setValue('Option A')}>Option A</button>
19+
</li>
20+
<li>
21+
<button onClick={() => setValue('Option B')}>Option B</button>
22+
</li>
23+
<li>
24+
<a href="https://github.com/dev-javascript/react-custom-search-list" target="_blank">
25+
Github Link
26+
</a>
27+
</li>
28+
<li>
29+
<a href="https://www.npmjs.com/package/react-custom-search-list" target="_blank">
30+
NPM Link
31+
</a>
32+
</li>
33+
</ul>
34+
</ReactCustomSearchList>
35+
);
36+
}
37+
<App />;
38+
```

‎example/stories/underline-theme/README.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
```jsx
2+
import React, {useState} from 'react';
3+
import ReactCustomSearchList from 'react-custom-search-list';
4+
import 'react-custom-search-list/style/react-custom-search-list.css';
5+
6+
const items = ['Item A', 'Item B', 'Item C', 'Item D'];
7+
8+
function App() {
9+
const [value, setValue] = useState('');
10+
return (
11+
<ReactCustomSearchList
12+
value={value}
13+
onChange={(e) => setValue(e.target.value)}
14+
onClear={() => setValue('')}
15+
theme="underline"
16+
fullWidth
17+
corner>
18+
{/**Render your suggestions list here*/}
19+
{value
20+
? items
21+
.filter((item) => item.toLowerCase().includes(value.toLowerCase()))
22+
.map((item) => (
23+
<div key={item} style={{margin: '5px'}}>
24+
<p onClick={() => setValue(item)}>{item}</p>
25+
</div>
26+
))
27+
: null}
28+
</ReactCustomSearchList>
29+
);
30+
}
31+
<App />;
32+
```

‎styleguide.config.js

+14-7
Original file line numberDiff line numberDiff line change
@@ -35,16 +35,23 @@ module.exports = {
3535
],
3636
// assetsDir: "example/stories/assets",
3737
sections: [
38-
// {
39-
// name: 'Minimal Usage',
40-
// content: 'example/stories/minimal-usage/README.md',
41-
// sectionDepth: 1,
42-
// },
4338
{
44-
name: 'Simple Manipulation',
45-
content: 'example/stories/simple-manipulation/README.md',
39+
name: 'Constant Suggestions List',
40+
content: 'example/stories/constant-suggestions-list/README.md',
4641
sectionDepth: 1,
4742
},
43+
{
44+
name: 'Dynamic Suggestions List',
45+
content: 'example/stories/dynamic-suggestions-list/README.md',
46+
},
47+
{
48+
name: 'Panel Theme',
49+
content: 'example/stories/panel-theme/README.md',
50+
},
51+
{
52+
name: 'Underline Theme',
53+
content: 'example/stories/underline-theme/README.md',
54+
},
4855
],
4956
styleguideComponents: {},
5057
pagePerSection: true,

0 commit comments

Comments
 (0)