React-Complete

simple customizable react autocomplete component

Demo

Codesandbox

Install

npm install react-complete --save

Usage

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>
  )}
/>

License

ISC