Autocomplete Component for React
Branch: master
Clone or download
Aykut Kardaş
Latest commit 95f130c Oct 18, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Add fetch data future. Oct 17, 2018
.gitignore Initial Commit Oct 17, 2018
README.md Version and readme update. Oct 18, 2018
index.js Add fetch data future. Oct 17, 2018
package.json Version and readme update. Oct 18, 2018

README.md

React Leblebi

Simple autocomplete react component.

Install

npm install react-leblebi
yarn add react-leblebi

Usage

import Leblebi from "react-leblebi";
<Leblebi data={data} config={config} classNames={classNames} style={style} />

Data detail

const data = ["javascript", "react", "es6", "code", "js", "babel"];

JSON Data detail

const data = [
  { name: "javascript" },
  { name: "react" },
  { name: "es6" },
  { name: "code" },
  { name: "js" },
  { name: "babel" }
];

Config for JSON data field

const config = {
  field: "name"
};

Fetch Data API

Dummy Data

{
  "items": [
    {
      "name": "react-leblebi"
    },
    {
      "name": "leblebi"
    }
  ]
}

Select 'items' prop and data 'name' field Config:

{
  prop: "items",
  field: "name",
}

Usage

<Leblebi
  config={{
    prop: "items",
    field: "name",
    delay: 300
  }}
  data={value =>
    fetch("https://api.github.com/search/repositories?q=" + value).then(
      response => response.json()
    )
  }
/>

Advanced Dummy Data

{
  "data": {
    "hydra:member": [
      {
        "name": "react-leblebi"
      },
      {
        "name": "leblebi"
      }
    ]
  }
}

Config for deep prop

{
  prop: "data.hydra:member",
  field: "name",
}

Config

Name Value Default Description Example
noDefaultStyle boolean false Clear default inline style { noDefaultStyle: false}
limit integer 10 Maximum show result { limit: 5 }
field string false Select data field { field: 'name' }
prop string false Select data prop { prop: 'data.items' }
delay integer 300 Set timeout for ajax request { delay: 500 }
lang string null Data lang { lang: 'tr-TR' }

Attributes

Name Value Default Description Example
data array [] Array data [{name: 'John'} , {name: 'Joe'}] or ['Jonh', 'Joe']
data function [] Fetch data request (value) => fetch(url).then(res =>res.json)
style object {} Customize inline style { leblebiInput: {color: red } }
classNames object {} Add an additional class. { leblebiInput: 'form-control' }

Customization

Style

Leblebi DOM

<div class="leblebi">
  <input class="leblebi-input" />
  <div class="leblebi-result">
    <div class="leblebi-item">
      <span class="leblebi-word">leb</span>lebi
    </div>
    <div class="leblebi-item">
      çe<span class="leblebi-word">leb</span>ice
    </div>
    <div class="leblebi-item leblebi-item-active">
      ile<span class="leblebi-word">leb</span>et
    </div>
  </div>
</div>
const style = {
  leblebi: {},
  leblebiInput: {},
  leblebiResult: {},
  leblebiItem: {},
  leblebiItemActive: {},
  leblebiWord: {}
};
<Leblebi style={style} />

Default Inline Style

const defaultStyle = {
  leblebi: {
    display: "flex",
    flexDirection: "column"
  },
  leblebiInput: {},
  leblebiResult: {
    background: "#fff",
    border: "1px solid #ccc",
    padding: 1
  },
  leblebiItem: {
    cursor: "pointer",
    padding: 6
  },
  leblebiItemActive: {
    background: "#2666b9",
    color: "#fff"
  },
  leblebiWord: {
    padding: "3px 1px 0px",
    border: "1px solid #ffd94f",
    color: "#f9a500",
    background: "#ffefd3",
    borderRadius: 2,
    fontWeight: "normal",
    margin: "0px 1px",
    boxShadow: "1px 1px 1px -1px #000000"
  }
};

Remove Default Inline Style

const config = {
  noDefaultStyle: true
};

ClassNames

Add an additional class.

const classNames = {
  leblebi: "",
  leblebiInput: "",
  leblebiResult: "",
  leblebiItem: "",
  leblebiItemActive: "",
  leblebiWord: ""
};
<Leblebi classNames={classNames} />

Accessibility

Up, Down, Enter, Tab keyboard control.

Demo Gif