Socket
Socket
Sign inDemoInstall

this-package-exports-the-number-214-and-its-name-is-also-two-hundred-and-fourteen-characters-long-which-is-the-longest-name-currently-allowed-by-the-npm-registry-to-see-how-a-name-that-long-would-look-if-you-did-ii

Package Overview
Dependencies
0
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    this-package-exports-the-number-214-and-its-name-is-also-two-hundred-and-fourteen-characters-long-which-is-the-longest-name-currently-allowed-by-the-npm-registry-to-see-how-a-name-that-long-would-look-if-you-did-ii

[![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)


Version published
Maintainers
1
Install size
7.19 kB
Created

Readme

Source

React Menu

Build Status npm version

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

Menu
NameTypeDefaultDescription
classNameString''Used for customizing the style.
childrenElements/Components''List of elements to place in the menu
Button
NameTypeDefaultDescription
classNameString''Used for customizing the style.
disabledClassNameString''Used for customizing the disabled style.
childrenElements/Components''List of elements to place in the menu
isDisabledboolean''Toggle to disable/enable the component.
onClickfunction''The click callback function.
Dropdown
NameTypeDefaultDescription
classNameString''Used for customizing the style.
disabledClassNameString''Used for customizing the disabled style.
itemsClassNameString''Used for customizing the items container style.
iconClassNameString''Used for customizing the chevron icon.
labelString''The dropdown label
childrenElements/Components''List of elements to place in the menu
isDisabledboolean''Toggle to disable/enable the component.
onClickfunction''The click callback function.
directionString''bottom, right, left, bottom_left - default uses bottom style.
Seperator

Use this component to divide the menu to left and right sections

NameTypeDefaultDescription
classNameString''class name - Used for customizing the style.

How to Contribute

Setting up development environment
  1. Fork the repository and create your branch from master.
  2. Install the project: yarn install
  3. Run tests: yarn test or yarn test:watch
  4. Run dev environment: yarn storybook and head to https://localhost:6006
Issuing a change
  1. Push to github.

  2. If you’ve fixed a bug or added code that should be tested, add tests.

  3. 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.
  4. 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

FAQs

Last updated on 19 Oct 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc