Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@hawk-ui/dropdown

saurabh2112205MIT4.5.0

hawk-ui: Basic Dropdown Component

dropdown, react, react component, react dropdown, hawk, hawk-ui, ui

readme

Installation

To install a component run

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

Please import CSS styles via

`scss noeditor @import '/pathtonode_modules/@hawk-ui/dropdown/dist/index.min.css



## Usage


#### Dropdown Button Click
[Demo](https://hawk.oncrypt.co/#!/Dropdown/1)
```js static
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
  isMultiClickable
  suggestions={suggestions}
  renderSuggestion={(suggestion) => suggestion.title}
  selectValue={(meta, item) => { console.log(meta, item); }}
/>

Demo `js static import Dropdown from '@hawk-ui/dropdown';

```js
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>
  )}
/>

Demo `js static import Dropdown from '@hawk-ui/dropdown';

```js
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); }}
/>

Demo `js static import Dropdown from '@hawk-ui/dropdown';

```js
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); }}
/>