React-Complete

simple customizable react autocomplete component

Demo

npm install react-complete --save

import Complete from 'react-complete';

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

Data

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

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

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

Custom Input Component

<Complete
 inputComp={
 <input type="text" placeholder="search..." className="search-input" />
 }
/>

Custom Item Component

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

<Complete
 renderItem={({ item, raw }) => (
 <div className="item">
 <img src={item.img} />
 <span>{raw}</span>
 </div>
 )}
/>

ISC