React-dropdowniz NPM

React Dropdowniz

Simple and minimalistic dropdown React component

Example

https://ivanzusko.github.io/react-dropdowniz/

Installation

Just run

npm i react-dropdowniz

or (if you are using Yarn)

yarn add react-dropdowniz

Usage

The basic usage looks like this:

import React, { Component } from 'react';
import Dropdown from 'react-dropdowniz';

class YourComponent extends Component {
  state = {
    showDropdown: false,
  }

  handleShowDropdown = () => {
    this.setState(() => ({
      showDropdown: true,
    }));
  }

  handleHideDropdown = () => {
    this.setState(() => ({
      showDropdown: false,
    }));
  }

  render() {
    return (
      <div>
        <h1>Some bla-bla title</h1>
        <button onClick={this.handleShowDropdown}>Open dropdown</button>

        <Dropdown
          className="your-class"
          alignRight // to align dropdown on the right
          isOpen={this.state.showDropdown}
          onClose={this.handleHideDropdown}
        >
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </Dropdown>
      </div>
    );
  }
}

You can provide your own styles:

by writing CSS rules in your styleshit (as far as you are passing className as a prop);
by passing an object with styles as a style prop(as you can do with any another regular React component):

const myStyles = {
  backgroundColor: 'rgba(255, 255, 255, .6)',
  border: 'solid 1px salmon',
}

<Dropdown
  style={myStyles} // just like with any other React components
  isOpen={this.state.showDropdown}
  onClose={this.handleHideDropdown}
>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</Dropdown>

by passing inline any valid CSS rule as a prop straight into component(e.g. backgroundColor="#f00"):

<Dropdown
  isOpen={this.state.showDropdown}
  onClose={this.handleHideDropdown}
  backgroundColor="#f00"
  zIndex={100}
>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</Dropdown>

Options

Required

Property	Type	Default value	Description
`onClose`	Function	true	Function responsible for changing the state of the component which includes `Dropdown`
`show` (Deprecated)	boolean	true	was responsible for show/hide dropdown
`isOpen`	boolean	true	responsible for show/hide dropdown

Not required

Property	Type	Default value	Description
`className`	string	`DD`	custom className which will be added to the default `DD`
`alignLeft` or `alignRight`	boolean		props which are responsible for alignment. If they are not stated - `Dropdown`, by *default* will be centered *in the middle* (related to container in which dropdown is rendering). NOTE: you should not use both `alignLeft` and `alignRight` simultaneously, because dropdown will get `left: 0` in this case
`discardDefault`	boolean		If you want you can totally discard all the default styles, just be sure you are providing your own styles instead
`style`	Object		if you want, you can pass object with your styles (like you would do with any other React components).
`width`, `backgroundColor`, `zIndex` or any another valid CSS rule	string		you can pass any valid CSS rule via `props`. NOTE: single CSS style rules passed via `props` will have higher priority then styles passed inside the object via `style` prop. E.g. if you pass `style={{ width: '10rem', zIndex: '3' }}` and at the same time `zIndex={100}` - your dropDown will get `z-index: 100`