npm

Need private packages and team management tools?Check out npm Orgs. »

studio-auto-complete

0.0.9 • Public • Published

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
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>

install

npm i studio-auto-complete

Downloadsweekly downloads

19

version

0.0.9

license

ISC

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability