@crpt/react-menu

react-menu React component

Stats

StarsIssuesVersionUpdatedCreatedSize
@crpt/react-menu
0151.0.12 years ago3 years agoMinified + gzip package size for @crpt/react-menu in KB

Readme

react-menu

Travis npm package Coveralls

Install

npm i --save @crpt/react-menu

Usage

import Menu from "@crpt/react-menu"; 
...
<Menu
    isOpen={isOpen}
    header={Header}
    footer={Footer}
    menuItems={menuItems}
    onFullModeClick={toggleFullMode}
/>
PropName Description Example
isOpen: boolean When true Menu width is wide, else - narrow
header: function Header component. See Note1
footer: function Footer component. See Note1
menuItems: Array of functions Menu items.

Note 1. Function will be called with parameter isOpen.

Lets we have a menu item (or header, or footer) component like this:

const MenuItem = ({ isOpen, text, iconName }) => (
  <div
    style={{ ... }}
    onClick={() => console.log(`Clicked to ${text}.`)}
  >
    <Icon type={iconName} />
    {isOpen ? text : null}
  </div>
);

We can define text and iconName props for every item, and isOpen property will be sent when render ({ isOpen }) => (<MenuItem isOpen={isOpen} text="smthText" iconName="smthIconName" />);

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.