Dropdown component
Generic and lightweight React dropdown component.
Installation
With yarn
yarn add @rootre/forms-dropdown
or with npm
npm install @rootre/forms-dropdown
Usage
Basic usage:
import React from 'react';
import Dropdown from '@rootre/forms-dropdown';
import '@rootre/forms-dropdown/styles.css';
export default function App() {
const items = [
{label: 'Cat'},
{label: 'Dog'},
{label: 'Rabbit'},
{label: 'Parrot'},
];
return (
<div>
<Dropdown
items={items}
afterChange={item => {
console.log('selected item:', item);
}}
/>
</div>
);
}
Your item object can be anything, only mandatory field
is label
key that is shown in component HTML.
Usage with controllers:
You can pass react useState instances to control dropdown's behavior:
import React, {useState} from 'react';
import Dropdown from '@rootre/forms-dropdown';
import '@rootre/forms-dropdown/styles.css';
export default function App() {
const items = [
{label: 'Cat'},
{label: 'Dog'},
{label: 'Rabbit'},
{label: 'Parrot'},
];
const activeItemController = useState(items[0]); // bare in mind that controllers override initials
const openController = useState(false);
const [, setActiveItem] = activeItemController;
const [, setOpen] = openController;
return (
<div>
<button onClick={() => setActiveItem(items[2])}>Set Rabbit</button>
<button onClick={() => setOpen(true)}>Open dropdown</button>
<Dropdown
items={items}
controllers={{
active: activeItemController,
open: openController,
}}
/>
</div>
);
}
Note
Controllers override initials, so if you want set controller for active item (controllers.active) you set initial active item in
useState(initialItem)
Styling
Component classes are bundled via CSS modules and uses local ident name: dropdown_[local]
CSS file:
import '@rootre/forms-dropdown/styles.css';
Importing whole css file get you all basic formatting.
Optionally, if you use overrides: itemTemplate
or itemsTemplate
you could use
defaults from original sass file:
Sass file:
import '@rootre/forms-dropdown/styles.scss';
It gets you following defaults:
.activeItem {} /* selected item */
.content {} /* wrapping div of opened dropdown contents */
.dropdown {} /* the whole dropdown */
.item {} /* item in opened dropdown list */
.list {} /* wrapping div of opened dropdown list */
Demo
Check out basic demo page
Props
(label: string) => React.Component
activeItemTemplate: default:
function activeItemTemplate(label) {
return <span>{label}</span>;
}
(item: object) => void
afterChange: default: () => {}
(isOpen: boolean) => void
afterOpen: default: () => {}
object
controllers:
Array.<function>
controllers.active: default:
React.useState(null)
Controller for getting/setting active item
Array.<function>
controllers.open: default:
React.useState(false)
Controller for opening/closing dropdown
boolean
disabled: default:
false
Passing true renders the component disabled/unclickable
boolean
hasError: default:
false
If true, an error class is added. Default styling paints borders in red
boolean
initialIsOpened: default:
false
If dropdown should be rendered open or not
object
initialItem: default:
null
Item that will be shown on first render
(item: object, handleSelect: function, index: number, labelKey: string) => React.Component
itemTemplate: default:
function itemTemplate(item, handleSelect, index, labelKey) {
return (
<div key={index} onClick={() => handleSelect(item)}>
<span>{item[labelKey]}</span>
</div>
);
}
Use for custom formatting items in dropdown
(items: object[], handleSelect: function, labelKey: string, itemTemplate: function) => React.Component
itemsTemplate: default:
function itemsTemplate(items, handleSelect, labelKey, itemTemplate) {
return (
<div className={styles.list}>
{items.map((item, index) => itemTemplate(item, handleSelect, index, labelKey))}
</div>
)
}
Use if you want to override the whole list of items in dropdown
Array.<object>
items: default:
[]
Can be array of any objects you want, but each object has to have labelKey
property set
string
labelKey: default:
label
Determines which item's object property will be used for rendering label inside dropdown
string
placeholder: default:
''
A placeholder text for dropdown