/react-leblebi

Autocomplete Component for React

Primary LanguageJavaScript

React Leblebi

Simple autocomplete react component.

Demo

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