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