Package Exports

react-dropdowniz

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-dropdowniz) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Dropdowniz

Simple and minimalistic dropdown React component

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>

        {
          this.state.showDropdown &&
            <Dropdown
              className="your-class"
              right
              show={this.state.showDropdown}
              onClose={this.handleHideDropdown}
            >
              <li>Item 1</li>
              <li>Item 2</li>
              <li>Item 3</li>
            </Dropdown>
        }
      </div>
    );
  }
}

Options

Required

Property	Type	Default value	Description
`onClose`	Function	true	Function responsible for changing the state of the component which includes `Dropdown`
`show`	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 dafault `DD`
`left` or `right`	boolean		props which are responsible for alignment. If they are not stated - `Dropdown`, by default will be centered in the middle
`width`	string	`20rem`	you can set `width` of the dropdown via `props` or pass your `className` and define rules in your styleshit
`zIndex`	number	`1`	you can set `z-index` of the dropdown via `props` or pass your `className` and define rules in your styleshit