![npm version](https://badge.fury.io/js/%40kenshooui%2Freact-menu.svg)
Kenshoo menu component
react-menu demo
React menu is a simple menu container component that helps a user create a simple menu bar
Installation
Installation using npm:
npm install @kenshooui/react-menu --save
Installation using Yarn:
yarn add @kenshooui/react-menu
How to use
import React, { Component } from "react";
import Menu, {
Button,
Dropdown,
Seperator,
DropdownItem,
} from ""@kenshooui/react-menu";
class Menu extends Component {
render() {
<Menu>
<Button>Analysis</Button>
<Dropdown label="options">
<DropdownItem>option 1</DropdownItem>
<DropdownItem>Option 2/DropdownItem>
</Dropdown>
<Separator />
<Button>Help</Button>
<Dropdown label="more options">
<DropdownItem>option 1</DropdownItem>
<DropdownItem>Option 2</DropdownItem>
</Dropdown>
<div>I'm a div</div>
</Menu>
}
}
Properties
Name | Type | Default | Description |
---|
className | String | '' | Used for customizing the style. |
children | Elements/Components | '' | List of elements to place in the menu |
Button
Name | Type | Default | Description |
---|
className | String | '' | Used for customizing the style. |
disabledClassName | String | '' | Used for customizing the disabled style. |
children | Elements/Components | '' | List of elements to place in the menu |
isDisabled | boolean | '' | Toggle to disable/enable the component. |
onClick | function | '' | The click callback function. |
Dropdown
Name | Type | Default | Description |
---|
className | String | '' | Used for customizing the style. |
disabledClassName | String | '' | Used for customizing the disabled style. |
itemsClassName | String | '' | Used for customizing the items container style. |
iconClassName | String | '' | Used for customizing the chevron icon. |
label | String | '' | The dropdown label |
children | Elements/Components | '' | List of elements to place in the menu |
isDisabled | boolean | '' | Toggle to disable/enable the component. |
onClick | function | '' | The click callback function. |
direction | String | '' | bottom, right, left, bottom_left - default uses bottom style. |
Seperator
Use this component to divide the menu to left and right sections
Name | Type | Default | Description |
---|
className | String | '' | class name - Used for customizing the style. |
How to Contribute
Setting up development environment
- Fork the repository and create your branch from
master
. - Install the project:
yarn install
- Run tests:
yarn test
or yarn test:watch
- Run dev environment:
yarn storybook
and head to https://localhost:6006
Issuing a change
-
Push to github.
-
If you’ve fixed a bug or added code that should be tested, add tests.
-
Open a Pull Request with the following guidelines:
- Set title prefix to feature/bug and supply a descriptive PR title.
- Add description to your Pull Request describing your change.
-
Once your Pull Request is issued, the test suite and build processes will run and your change will be reviewed.
Compatibility