fyndiq-component-dropdown

Preview

A dropdown component for Fyndiq

Installation

The component can be installed through NPM:

npm i -S fyndiq-component-dropdown

Usage

import React from 'react'
import Dropdown from 'fyndiq-component-dropdown'

// Normal usage
<Dropdown button="Open dropdown">
  Dropdown content
</Dropdown>

// No arrow pointing downwards
<Dropdown button="Open dropdown" noArrow>
  Dropdown content
</Dropdown>

// Custom button
import Button from 'fyndiq-component-button'
<Dropdown button={(
  <Button type="primary">
    Open Dropdown
  </Button>
)}>
  Dropdown content
</Dropdown>

// Open dropdown on hover
<Dropdown button="Hover me" hoverMode>
  Dropdown content
</Dropdown>

// Change the position of the dropdown
<Dropdown button="Top right" position="tr">
  Dropdown content
</Dropdown>

// Custom class names
<Dropdown
  button="Open"
  className="className"
  wrapperClassName="wrapperClassName"
>
  Content
</Dropdown>

// Programatically close the dropdown from inside
<Dropdown button="button">
  {({ onClose }) => (
    <button onClick={onClose}>Click on me to close me</button>
  )}
</Dropdown>

// Add handlers on dropdown open and close actions
<Dropdown
  button="button"
  onOpen={this.handleDropdownOpen}
  onClose={this.handleDropdownClose}
>
  Content
</Dropdown>

See also : fyndiq-component-button

API

The component Dropdown has the following customizable props:

| Name | Type | Description | Default value | |---|---|---|---| | button | String or Component | The inside of the dropdown's button. If a String is passed, a <Button> will be shown. | (required) | | children | Component or Function | Content of the dropdown. If a function is passed, it will be passed a onClose handler. | (required) | | size | String | Size of the button if button is used in String mode. For values, see Button's API | Button's default | | position | String | Position of the dropdown, relatively to the button. One of bl, bc, br, tl, tc, tr | bl | | margin | Number | Distance from the dropdown to the button | 5 | | className | String | Class name to give to the root element | | | **wrapperClassName** | String | Class name to give to the wrapper | | | disabled | Boolean | If true, disables the dropdown | false | | noArrow | Boolean | If button is used in String mode, hides the downwards arrow | false | | noWrapperStyle | Boolean | Remove cosmetic styles for the wrapper | false | | opened | Boolean | Allows to externally control the dropdown | false | | hoverMode | Boolean | Opens the dropdown on hover rather than on click | false | | noPropagateClickEvent | Boolean | Stop the propagation of the click event | false | | onOpen | Function | Handler method when the dropdown is opened | | | onClose | Function | Handler method when the dropdown is closed | |