React Leblebi
Simple autocomplete react component.
Demo
Install
npm install react-leblebi
yarn add react-leblebi
Usage
;
<Leblebi = = = = />
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
Select 'items' prop and data 'name' field Config:
prop: "items" field: "name"
Usage
<Leblebi = =/>
Advanced Dummy Data
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
leblebi çelebice ilelebet
const style = leblebi: {} leblebiInput: {} leblebiResult: {} leblebiItem: {} leblebiItemActive: {} leblebiWord: {};
<Leblebi = />
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 = />
Accessibility
Up, Down, Enter, Tab keyboard control.