@crpt/react-menu

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