5.3.1 • Published 2 years ago
@hemantnigam/react-search-autocomplete v5.3.1
React Search Autocomplete
A <ReactSearchAutocomplete/>
is fully customizable and feature rich search component.
Demo
Installing
npm i @hemantnigam/react-search-autocomplete
How to use
Step 1: Install @hemantnigam/react-search-autocomplete using npm i @hemantnigam/react-search-autocomplete
Step 2: import dependency in the component using
import ReactSearchAutocomplete from "@hemantnigam/react-search-autocomplete";
or
import { ReactSearchAutocomplete } from "@hemantnigam/react-search-autocomplete";
Step 3: Add it into the JSX using
<ReactSearchAutocomplete options=options />
Available options
{
"classNames": { //custom classnames for search component
"search": "string",
"input": "string",
"list": "string",
"listItem": "string",
},
"style": { //custom style for search components
"width": "number" | "string", //default is 300px
"height": "number" | "string", //default is 35px
"fontSize": "number" | "string",
"fontWeight": "number" | "string",
"fontFamily": "number" | "string",
"margin": "number" | "string",
"marginTop": "number" | "string",
"marginBottom": "number" | "string",
"marginLeft": "number" | "string",
"marginRight": "number" | "string",
"input": {
"textIndent": "number" | "string",
"padding": "number" | "string",
"paddingTop": "number" | "string",
"paddingBottom": "number" | "string",
"paddingLeft": "number" | "string",
"paddingRight": "number" | "string",
},
"listItem": {
"height": "number" | "string",
"padding": "number" | "string",
"paddingTop": "number" | "string",
"paddingBottom": "number" | "string",
"paddingLeft": "number" | "string",
"paddingRight": "number" | "string",
"margin": "number" | "string",
"marginTop": "number" | "string",
"marginBottom": "number" | "string",
"marginLeft": "number" | "string",
"marginRight": "number" | "string",
},
},
"placeholder": "string" //default is Select
"searchCount": 'number' //default is 5
"debounceDelay": "number" //delay after input
"highlightSearch": "boolean" //if search result should highlight the searched text
"data": {
"schema": { //model of actual data
"id": "string", //id label of data object
"text": "string" //search text label of data object
},
"content": "array" //contains the data like [{}{}{}...]
"task": "promise" // promise that will return data from server
"serializer": "function" //function to modify response data
"searchCriteria": "startsWith" | "includes" //default to startsWith
}
}
Support
React v18+
Note: Please feel free to contribute in the project. Thanks
5.3.1
2 years ago
5.3.0
2 years ago
5.1.1
2 years ago
5.1.0
2 years ago
5.0.0
2 years ago
3.0.0
2 years ago
4.1.0
2 years ago
4.0.0
2 years ago
2.0.0
2 years ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.16
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago