@kenshooui/react-menu NPM

React Menu

Kenshoo menu component

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

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.
`withIcon`	`boolean`	'true'	Toggle to display/hide arrow icon next to the dropdown title.
`onClick`	`function`	''	The click callback function.
`direction`	`String`	''	bottom, right, right_to_top, left, left_to_top, 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.