Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 141ff75

Browse files
update examples
1 parent 4211195 commit 141ff75

File tree

5 files changed

+136
-24
lines changed

5 files changed

+136
-24
lines changed
Lines changed: 37 additions & 0 deletions
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

Lines changed: 15 additions & 17 deletions
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

Lines changed: 38 additions & 0 deletions
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+
```
Lines changed: 32 additions & 0 deletions
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

Lines changed: 14 additions & 7 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /