## Dropdown

Creating Dropdown buttons with UI and React is easy.

UI provides `Dropdown` component that yields render props to show/hide the dropdown, check visibility, and apply additional styles.

While this can be used with any layout you want, Buttons and Button Groups are recommended.

```javascript
import Dropdown from '@dollarshaveclub/components/Dropdown/index.tsx'

const DropdownButton = () => {
  ;<Dropdown>
    {(showDropdown, hideDropdown, isOpen) => {
      const handleClick = (e) => {
        e.preventDefault()
        // Do something
        hideDropdown()
      }

      return (
        <div>
          {/* Dropdown Target, must have `ui-dropdown__target` class */}
          <button
            className="ui-dropdown__target ui-btn ui-btn__primary ui-btn--md"
            onClick={isOpen ? hideDropdown : showDropdown}
            onBlur={hideDropdown}
          >
            View More
          </button>

          {/* Dropdown Items */}
          <div className="ui-dropdown__menu">
            <a className="ui-dropdown__item" href="#" onMouseDown={doSomething}>
              Action
            </a>
            <a className="ui-dropdown__item" href="#">
              Another action
            </a>
            <a className="ui-dropdown__item" href="#">
              Something else here
            </a>
            <hr className="ui-hr" />
            <a className="ui-dropdown__item" href="#">
              Separated link
            </a>
          </div>
        </div>
      )
    }}
  </Dropdown>
}
```