1.3.4 • Published 6 years ago
@ohxyz/combobox v1.3.4
Quick start
<Combobox items={ [ 'abc', 'abd', 'bcd', 'cde', 'bde' ] }
onSelect={ item => console.log( item ) }
/>
More
import React from 'react';
import ReactDOM from 'react-dom';
import { Combobox } from '@ohxyz/combobox';
import '@ohxyz/combobox/style/default.css';
const persons = [
{ height: 175, name: 'Andrea' },
{ height: 167, name: 'Anthony', sex: 'Male' },
{ name: 'Annie', sex: 'Female', height: 180 },
{ name: 'Campbell', height: 175 },
{ sex: 'Female', name: 'Bennie', height: 175 },
{ name: 'Cameron', height: 173, sex: 'Male' },
{ name: 'Benjamin', sex: 'Male', height: 167 },
{ name: 'Anna', sex: 'Female', height: 169 },
{ name: 'Benson', sex: 'Male' }
];
ReactDOM.render(
<Combobox
items={ persons }
fields={ [ 'name', 'height' ] }
indexOfFieldsToSort={ 1 }
id="my-combobox"
inputId="my-combobox__input-id"
inputName="my-combobox__input-name"
placeholder="Search people..."
strikes={ 2 }
shouldRenderCount={ true }
shouldRenderListOnFocus={ false }
shouldRenderIcon={ true }
onIconClick= { combobox => { console.log( combobox ); combobox.toggleAllItems(); } }
onSelect={ ( item, combobox ) => { console.log( item, combobox ); } }
onChange= { combobox => console.log( combobox ) }
onFocus={ combobox => console.log( combobox ) }
onBlur={ combobox => console.log( combobox ) }
/>,
document.getElementById( 'container' )
);
Render customized item by inheritance
class MyCombobox extends Combobox {
renderItem( person ) {
return (
<div className="combobox__person">
<div>{ person.name }</div>
{ person.sex && <div>{ { Male: 'Man', Female: 'Woman' }[ person.sex ] }</div> }
{ person.height && <div>Height: { person.height }CM</div> }
</div>
);
}
}
ReactDOM.render(
<MyCombobox items={ persons } />,
document.getElementById( 'container' )
);
1.3.4
6 years ago
1.3.3
6 years ago
1.3.2
6 years ago
1.3.1
6 years ago
1.3.0
6 years ago
1.2.0
6 years ago
1.1.6
6 years ago
1.1.5
6 years ago
1.1.4
6 years ago
1.1.3
6 years ago
1.1.2
6 years ago
1.1.1
6 years ago
1.1.0
6 years ago
1.0.9
6 years ago
1.0.8
6 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago
0.0.1
6 years ago