React AutoSuggest Component

Installation

npm install --save sk-autosuggest

or

yarn add sk-autosuggest

How To Use

First import this component where you want to use it

import AutoSuggest from "sk-autosuggest"

Props

| Prop | Description | Default value | | ------ | :-------------------: | :-------------: | | data | List of results | [] | | label | Name on Input | 'Select' | | showClearIcon | Boolean to show clear Icon | true | | fieldName | Name of the field to display in results | name | | placeholder | placeholder to display in input | 'Type here...' | | handleOnValueSelected | handler to get the data on selecting the result | - |

Example

import React, { Component } from "react";
import AutoSuggest from "sk-autosuggest";
import 'sk-autosuggest/dist/AutoSuggest.css';

class App extends Component {
  render() {
    const data = [
      {
        "id":"7400",
        "employee_name":"elrdfafa",
        "employee_salary":"32432",
        "employee_age":"234234",
        "profile_image":""
      },
      {
        "id":"7402",
        "employee_name":"Laurent Tumpane",
        "employee_salary":"38342",
        "employee_age":"34",
        "profile_image":""
      },
      {
        "id":"7404",
        "employee_name":"Christophorus MacManus",
        "employee_salary":"78211",
        "employee_age":"40",
        "profile_image":""
      }
    ];
    return (
      <AutoSuggest
        data={data}
        fieldName="employee_name"
        showClearIcon
        label="Employee Name"
        placeholder="Type here..."
      />
    );
  }
}

export default App;