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 fbc5815

Browse files
update document
1 parent 0ff8ffa commit fbc5815

File tree

1 file changed

+53
-29
lines changed

1 file changed

+53
-29
lines changed

‎README.md

Lines changed: 53 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,40 +6,53 @@ Whether you want to showcase a constant list of options or dynamically adapt to
66

77
## Features
88

9-
- Dynamic suggestions list
9+
- Custom suggestions list
1010

1111
- Responsive
1212

13+
- Multi Themes
14+
1315
- Clear button
1416

1517
- `Rtl` support
1618

1719
- Flexible style
1820

21+
- Lightweight
22+
1923
## Installation
2024

21-
> $ npm install react-custom-search-list --save
25+
> $ npm install react-custom-search-list @popperjs/core--save
2226
2327
or
2428

25-
> $ yarn add react-custom-search-list
29+
> $ yarn add react-custom-search-list@popperjs/core
2630
2731
If you need to directly include script in your html, use the following links :
2832

2933
```js
3034
<script src="https://unpkg.com/react-custom-search-list@latest/dist/react-custom-search-list.umd.min.js"></script>
3135
```
3236

37+
#### NOTE:
38+
39+
> Please note that `@popperjs/core` is peer dependency, meaning you should ensure it is installed before installing `react-custom-search-list`.
40+
3341
## Minimal Usage
3442

3543
```js
3644
import {useState} from 'react';
45+
import 'react-custom-search-list/style/react-custom-search-list.min.css';
3746
import ReactCustomSearchList from 'react-custom-search-list';
3847
function App() {
39-
const [searchValue, setSearchValue] = useState('');
48+
const [value, setValue] = useState('');
4049
return (
41-
<ReactCustomSearchList fullWidth value={searchValue} setValue={setSearchValue}>
42-
/**Render your suggestions list here */
50+
<ReactCustomSearchList
51+
fullWidth
52+
value={value}
53+
onChange={(e) => setValue(e.target.value)}
54+
onClear={() => setValue('')}>
55+
{/**Render your suggestions list here*/}
4356
<ul>
4457
<li>Option A</li>
4558
<li>Option B</li>
@@ -52,49 +65,60 @@ function App() {
5265

5366
## Props
5467

55-
- value
68+
- **value**
5669
- type : `String`
5770
- description : input value
58-
- setValue
71+
- **onChange**
5972
- type : `Func`
60-
- description : setState function for input value
61-
- children
73+
- description : onChange Handler for the input value
74+
- **children**
6275
- type : `ReactNode`
6376
- description : suggestions list
64-
- rootStyle?
77+
- **rootStyle?**
6578
- type : `Object`
6679
- description : style object of the `root` element
67-
- inputStyle?
80+
- **inputContainerStyle?**
81+
- type: `Object`
82+
- description : style object of the parent element of text input
83+
- **inputStyle?**
6884
- type : `Object`
6985
- description : style object of the `input` element
70-
- placeholder?
86+
- **placeholder?**
7187
- type : `String`
7288
- default : `"search"`
73-
- iconsColor?
74-
- type : `String`
75-
- description : svg icon's color
76-
- default : `"gray"`
77-
- searchIconStyle?
78-
- type : `Object`
79-
- description : style object of the magnifying icon
80-
- clearIconStyle?
81-
- type : `Object`
82-
- description : style object of the clear icon
83-
- popperStyle?
89+
- **popperStyle?**
8490
- type : `Object`
8591
- description : style object of the popper container
86-
- onKeyDown?
92+
- **onKeyDown?**
8793
- type : `Func`
8894
- description : keydown event for input
89-
- onBlur?
95+
- **onFocus?**
96+
- type : `Func`
97+
- description : focus event for input
98+
- **onBlur?**
9099
- type : `Func`
91100
- description : blur event for input
92-
- fullWidth?
101+
- **fullWidth?**
93102
- type : `Boolean`
94-
- description : set popper width same as input
95-
- placement?
103+
- description : set popper width same as input ( if the `theme` option is equal to `"panel"` then `fullWidth` option will not work )
104+
- default: `true`
105+
- **placement?**
96106
- type : `'auto'| 'auto-start'| 'auto-end'| 'top'| 'top-start'| 'top-end'| 'bottom'| 'bottom-start'| 'bottom-end'| 'right'| 'right-start'| 'right-end'| 'left'| 'left-start'| 'left-end'`
97107
- description : popper's placement
108+
- default : `bottom-start`
109+
- **ClearIconComponent?**
110+
- type : `React function component`
111+
- description : custom Clear icon
112+
- **MagnifierIconComponent?**
113+
- type : `React function component`
114+
- description : custom Magnifier icon
115+
- **onClear?**
116+
- type : `Func`
117+
- description : triggered when the user clicks on the Clear icon
118+
- **theme?**
119+
- type : `"outline"|"underline"|"panel"`
120+
- description : searchbox theme
121+
- default : `"outline"`
98122

99123
## Test
100124

0 commit comments

Comments
(0)

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