aykutkardas / react-leblebi

Autocomplete Component for React

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.