Installation

To install a component run

$ npm install @hawk-ui/dropdown --save

Please import CSS styles via

@import '/path__to__node_modules/@hawk-ui/dropdown/dist/index.min.css

Usage

Dropdown Button Click

Demo

import Dropdown from '@hawk-ui/dropdown';

const suggestions = [
  {title: 'Action', value: 'action', isActive: true},
  {title: 'Another action', value: 'another action', isActive: false},
  {title: 'Something else here', value: 'something else here', isActive: true},
];

<Dropdown
  title="Dropdown"
  isIcon
  suggestions={suggestions}
  renderSuggestion={(suggestion) => suggestion.title}
  selectValue={(meta, item) => { console.log(meta, item); }}
/>

Dropdown With Children

Demo

import Dropdown from '@hawk-ui/dropdown';

initialState = {
  shouldDropdownShow: false,
};
const suggestions = [
  {title: 'Action', value: 'action', isActive: true},
  {title: 'Another action', value: 'another action', isActive: false},
  {title: 'Something else here', value: 'something else here', isActive: true},
];

<Dropdown
  title="Dropdown"
  isIcon
  suggestions={suggestions}
  shouldDropdownShow={state.shouldDropdownShow}
  renderSuggestion={(suggestion) => suggestion.title}
  selectValue={(meta, item) => { console.log(meta, item); }}
  children={(
    <React.Fragment>
      <span
        onClick={() => {
          setState({
            shouldDropdownShow: false,
          });
        }}
      >
        Children Action
      </span>
    </React.Fragment>
  )}
/>

Dropdown Link

Demo

import Dropdown from '@hawk-ui/dropdown';

const suggestions = [
  {title: 'Action', value: 'action', link: '/#', isActive: true},
  {title: 'Another action', value: 'another action', link: '/#', isActive: false},
  {title: 'Something else here', value: 'something else here', link: '/#', isActive: true},
];

<Dropdown
  title="Dropdown"
  isIcon
  suggestions={suggestions}
  renderSuggestion={(suggestion) => suggestion.title}
  selectValue={(meta, item) => { console.log(meta, item); }}
/>

Dropdown Button Hover

Demo

import Dropdown from '@hawk-ui/dropdown';

const suggestions = [
  {title: 'Action', value: 'action'},
  {title: 'Another action', value: 'another action'},
  {title: 'Something else here', value: 'something else here'},
];

<Dropdown
  title="Dropdown"
  isIcon
  isHoverable
  suggestions={suggestions}
  renderSuggestion={(suggestion) => suggestion.title}
  selectValue={(meta, item) => { console.log(meta, item); }}
/>