react-menu

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" />);