this-package-exports
v1.0.0
Published
[![Build Status](https://travis-ci.org/kenshoo/react-menu.svg?branch=master)](https://travis-ci.org/kenshoo/react-menu) [![npm version](https://badge.fury.io/js/%40kenshooui%2Freact-menu.svg)](https://badge.fury.io/js/%40kenshooui%2Freact-menu)
Downloads
2
Readme
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
Menu
| 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
oryarn 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
- React 16 or newer