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 list

• tab

  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 prop

• options

  This prop receives an array with label and value keys for rendering the deezyner dropdown items

• onSelect

  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