React-Complete

simple customizable react autocomplete component

Demo

Codesandbox

Install

npm install react-complete --save

Usage

importCompletefrom'react-complete';

<Completedata={data}prop={prop}field={field}/>

Data

constdata=['react','vue','angular'];constdata=(value)=>fetch('...').then((res)=>res.json());

constdata={languages: {name: 'javascript',frameworks: [{name: 'react',},{name: 'vue',},{name: 'angular',},],},};

<Completedata={data}prop="languages.frameworks"field="name"/>

Custom Input Component

<CompleteinputComp={<inputtype="text"placeholder="search..."className="search-input"/>}/>

Custom Item Component

Parameter is object that contain 'fetch' result(item) and searching array's field(raw)

<CompleterenderItem={({ item, raw })=>(<divclassName="item"><imgsrc={item.img}/><span>{raw}</span></div>)}/>

License

ISC