Releases: talk2rajeev/rt-autocomplete
Releases · talk2rajeev/rt-autocomplete
0.1.0
- Option provided to pass Custom List Item as props using callback
renderCustomListItem={CustomListItem}
const CustomListItem = (props: Option) => {
return (
<div className="">
{props.value}
</div>
)
}
<AutoComplete
...
renderCustomListItem={CustomListItem}
....
/>
onSelect
option provided
const onSelect = (item: Option) => {
console.log(item.id, item.value)
}
<AutoComplete
...
onSelect={onSelect}
...
/>
- image option provided with sub title
export type Option = {
id: string;
value: string;
img?: string;
secondaryValue?: string;
};
const CustomListItemWithImage = (props: Option) => {
return (
<div className="listitem">
<div style={{display: 'grid', gridTemplateColumns: '50px auto', gridTemplateRows: 35}}>
<div><img src={props.img} alt="" style={{borderRadius: '50%', height: 40}}/></div>
<div>
<div style={{fontSize: 14}}>{props.value}</div>
<div style={{fontSize: 12, color: '#777'}}>{props.secondaryValue}</div>
</div>
</div>
</div>
)
}
<AutoComplete
...
renderCustomListItem={CustomListItemWithImage}
...
/>
0.0.9
mire item link implemented
0.0.85
CustomDropdownIcon option
props | type | description |
---|---|---|
onkeypress | function | query: string, delay: number (optional) |
onblur | function | optional, (query: string) |
onfocus | function | optional, |
listItems | Array[] | { value: string |
defaultValue | string | optional, default value to pre-populate |
maxItem | number | optional, show more items link if no |
of items are large | ||
showDropdownIcon | boolean | optional, show/hide icon |
CustomDropdownIcon | ReactElement | optional, |
0.0.83
props | type | description |
---|---|---|
onkeypress | function | query: string, delay: number (optional) |
onblur | function | query: string |
onfocus | function | |
listItems | Array[] | { value: string |
defaultValue | string | default value to pre-populate |
maxItem | number | show maxItems if no of items are large |
showDropdownIcon | function | show/hide showDropdownIcon |