ab-dropdown-react
v1.0.8
Published
customizable dropdown list
Downloads
40
Maintainers
Readme
ab_dropdown
react dropdown component
Why ab_dropdown?
- easy customizable
- flexible
- keyboard navigation
Coming soon:
- search inside dropdown list
- ability to use immutable data (with Immutable.js library)
- sorting items via specified parameters
Usage
example 1
import Dropdown from 'ab-dropdown-react';
const SOURCE = [
{ key: 'edit', label: 'Edit' },
{ key: 'snooze', label: 'Snooze' },
{ key: 'delete', label: 'Delete' },
];
export default class Example1 extends Component {
//==========
onChange = item => {
// onChange
}
render() {
return (
<Dropdown
autoFocus
label="More"
onChange={(item) => this.onChange(item)}
source={SOURCE}
listItemRender={(item) => <div>{item.label}</div>}
/>
);
}
}
example 2
import Dropdown from 'ab-dropdown-react';
import EntityAvatar from './entityAvatar';
import './styles.sass';
const SOURCE = [
{ id: '5383130f646', name: 'Artem', lastName: 'Sherman', img: null },
{ id: '5d4988fff91', name: 'Xavier', lastName: 'Suire', img: null },
/*.........*/
];
export default class Example2 extends Component {
constructor(props, context) {
super(props, context);
const { user } = props;
this.state = {
value: user, // { id: '53835603646', name: 'Stephen', lastName: 'Leguillon', img: null },
};
}
onChange = (item) => {
// do what you need
}
listItemRender = (item) => (
<span className="list_item">
<EntityAvatar {...item} />
<span>{item.name}</span>
<span style={{ marginLeft: '5px' }}>{item.lastName}</span>
</span>
);
render() {
const { value } = this.state;
return (
<Dropdown
label="Select"
classNames={{
dropdown: 'custom-db',
trigger: 'custom-tg',
}}
styles={{
dropdown: { minWidth: '200px' },
trigger: { minWidth: '200px' },
}}
disabled={!SOURCE}
onChange={(item) => this.onChange(item)}
source={SOURCE}
labelRenderer={(item) => `${item.name} ${item.lastName}`}
listItemRender={this.listItemRender}
value={SOURCE.find((i) => i.name === value.name)}
/>
);
}
}