react-deezyner-dropdown v1.0.23
react-deezyner-dropdown
Simple Dropdown Component For React
Why this is a great option
- It gives you more enhanced controls
Installation
// with npm
$ npm install react-deezyner-dropdown --save
// with yarn
$ yarn add react-deezyner-dropdown
Usage
This is the basic usage of the deezyner dropdown
import React, { useState } from 'react';
import DeezynerDropdown from 'react-deezyner-dropdown';
const ExampleComponent = () => {
const [selection, setSelection] = useState(null);
// Only the label key is required
const options = [
{ label: 'One', value: 'one' },
{ label: 'Two', value: 'two' },
];
return (
<div>
<DeezynerDropdown
onSelect={(option) => setSelection(option.value)}
optionCloseDelay={100}
animateOptionFrom='top'
label='Select an option'
options={options}
tabClassName='border--green'
/>
</div>
)
}
If you want to use your custom dropdown, you can pass a node element to the tab
prop and also pass the children
as a render function, where the argument is the toggleOption
prop, for example:
<DeezynerDropdown tab={<TabControl label="Select" />}>
{(toggleOption) => (
<ExampleChildComponent />
<button onClick={() => toggleOption()}>Close Dropdown</button>
)}
</DeezynerDropdown>
Props
children
Whatever is passed as the children will serve as your custom deezyner dropdown options. If there's no children, then an
options
props should be used. This will render a default dropdown listtab
This prop receives a jsx which will act as your custom deezyner dropdown tab
toggleOption
This receives a boolean value. It acts as a watcher to determine when to close the deezyner dropdown option. Once the state is negated, the deezyner dropdown option closes. This is only required if you're using the component as a custom deezyner dropdown, i.e using the
tab
propoptions
This prop receives an array with
label
andvalue
keys for rendering the deezyner dropdown itemsonSelect
This is a callback which takes the selected option as its argument
optionCloseDelay
This prop determines the delay for the close of the deezyner dropdown option
animateOptionFrom
This prop sets the animation of the deezyner dropdown option
label
This prop receives the default label value
disabled
This prop activates or deactivates the deezyner dropdown
tabClassName
This prop styles the deezyner dropdown's control tab
listClassName
This prop styles the deezyner dropdown's items
optionClassName
This prop styles the deezyner dropdown option's container
isOptionActive
This is a callback which takes the option's active status as its argument
animation
This prop provides an option to toggle the animation for the deezyner dropdown option
prop | type | default | values |
---|---|---|---|
children | node | '' | - |
tab | node | '' | - |
toggleOption | boolean | false | true , false |
options | array | [] | keys: label , value |
onSelect | function | - | - |
optionCloseDelay | number | 0 | - |
animateOptionFrom | string | default | top , right , bottom , left , default |
label | string | Select an option | - |
disabled | boolean | false | true , false |
tabClassName | string | '' | - |
optionClassName | string | '' | - |
listClassName | string | '' | - |
isOptionActive | function | - | - |
animation | boolean | true | true , false |
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago