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

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`