0.0.9 • Published 5 years ago
studio-auto-complete v0.0.9
studio-auto-complete
This is an auto-complete component for reactJS.
Props
| name | type | default | description | |
|---|---|---|---|---|
| className? | string | "" | Class name of the component | |
| placeholder? | string | "" | Placeholder for the input | |
| items | any[] | Dictionary\<any> | Items to be shown in the dropdowns | ||
| defaultItems? | any[] | Dictionary\<any> | null | Items to be shown in the dropdowns | |
| searchAttribute? | string | null | This is a value of the attribute the data will be filtered by | |
| labelAttribute? | string | null | This is a value of the attribute the data shown in the list | |
| onInputChange? | (value: string) => void | null | A function called when a change on input is triggered | |
| onEnterPress? | (value: any) => void | null | A function which is trigered when enter button is clicked | |
| hasBlur? | boolean | true | True if the component should hide dropdown when clicked somewhere else | |
| shouldExecuteOnEnter? | boolean | null | OnClick execute the on enter function | |
| charInputNumber? | number | 0 | number of characters to input in order to show the dropdown | |
| shouldClearOnExecution? | boolean | true | if input should clear on execution | |
| onItemSelected? | (event:React.SyntheticEvent\<any>, item: any) => void; | null | Function to be called when an item is selected | either with mouse click or keyboad enter |
| shouldAlwaysShowOptions? | boolean | false | true if the options should always be visible | |
| customComponent? | (item: any) => React.ReactNode | null | function that returns a custom component as a list item |
Usage
import {Autocomplete} from 'studio-auto-complete';
import "path/to/node_modules/studio-auto-complete/src/autocomplete.scss";Simple example
<Autocomplete
className="example__autocomplete"
shouldClearOnExecution={true}
items={[{ key: "john", name: "John" }, { key: "doe", name: "Doe" }]}
placeholder={`Search by name`}
labelAttribute="name"
searchAttribute="name"
onItemSelected={(e,item) => {
//TODO code
}}
>
</Autocomplete>Custom component example
<Autocomplete
className="example__autocomplete"
shouldClearOnExecution={true}
items={[{ key: "john", name: "John" }, { key: "doe", name: "Doe" }]}
placeholder={`Search by name`}
labelAttribute="name"
searchAttribute="name"
onItemSelected={(e,item) => {
//TODO code
}}
customComponent={(item)=>{
return <AvatarImage key={item.key} label={item.label} />
}}
>
</Autocomplete>