https://github.com/fortunar/react-sidemenu

React sidemenu component
https://github.com/fortunar/react-sidemenu

drawer menu navigation react react-components side sidemenu

Last synced: 13 days ago
JSON representation

React sidemenu component

• Host: GitHub
• URL: https://github.com/fortunar/react-sidemenu
• Owner: fortunar
• Created: 2016-07-09T17:28:02.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T05:04:42.000Z (about 2 years ago)
• Last Synced: 2024-12-02T00:09:21.709Z (20 days ago)
• Topics: drawer, menu, navigation, react, react-components, side, sidemenu
• Language: JavaScript
• Size: 3.91 MB
• Stars: 57
• Watchers: 2
• Forks: 14
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# react-sidemenu

Lightweight side menu component written in React.js. No jQuery, just CSS3.



## Features

 - Pure React.js, no external dependencies

 - Configure via JS objects or via React components

 - Packed with default ready-to-use styling

 - Easy to customize styling guide

 - Custom rendering, collapse control, right-to-left etc.

 - Flow type checking support

## Usage

Install the component with NPM:

    npm install react-sidemenu --save

Import the component in your React.js application:

    import SideMenu from 'react-sidemenu';

### Flow

If you want to have access to Flow typed components, include `SideMenu.js` from dist folder when installing via npm.

## Styling!!!

 To use default styling include `side-menu.css`  to your project. You can find it in dist folder when installing via `npm`. For an idea on how to customize styling see [Demo](https://fortunar.github.io/react-sidemenu/).

## Demo & Examples

[Demo](https://fortunar.github.io/react-sidemenu/) showcasing the functionalities & code examples. In the examples we use Font Awesome icons (from a CDN).

You can run examples by yourself. Clone the repo and do:

    npm install

    npm start

The examples are run using Webpack development server. 

## Options

`` - main component

|**Option**|**Default**|**Description**|

| --- | --- | --- |

| items | null | Property for the JS Object configuration of the component SideMenu component. Check out [Demo](https://fortunar.github.io/react-sidemenu/) to find out how it works. |

| activeItem | null | Preset starting active item. Also used for opening and closing menu items from code (e.g. from a button). When using this option, make sure to **always** keep the controlling variable (e.g. variable in state) from the parent component of the menu in sync with the actual activeItem (i.e. override onMenuItemClick and update the variable) |

| collapse | true | This property gives you the capability to enable or disable collapsing menu when other elements of the menu are clicked. |

| theme | 'default' | This sets a class for the component that you can use to apply custom styling. The class will be Side-menu-[theme_name]. **Note:** our default theme uses Font Awesome icons. See [Demo](https://fortunar.github.io/react-sidemenu/) for an detailed example.  |

| renderMenuItemContent({ icon: icon, value: value, label: label }) | null | This property enables you to provide a custom render method for items. Function is passed one parameter, representing the menu item being rendered. It receives an object with attributes: icon, label and value. [Demo](https://fortunar.github.io/react-sidemenu/)|

| onMenuItemClick | `(value, extras) => window.location.href = '#' + value` | This property enables you to provide custom onClick method for items. The function gets passed the value of the clicked item and item extras (object). [Demo](https://fortunar.github.io/react-sidemenu/)|

| rtl | false | This property enables you to use the sidemenu in a right-to-left page. [Demo](https://fortunar.github.io/react-sidemenu/)|

| shouldTriggerClickOnParents | false | This property enables triggering 'onMenuItemClick' on parent items that have children. |

`` - this component is for the non-JS object config of the menu

|**Option**|**Description**|

| --- | --- |

| value | The href where you will be redirected after you click the item if no `onMenuItemClick` is provided. If `onMenuItemClick` is provided, it is the value being passed to the function call. |

| label | Just a label. |

| icon | This is the icon of the item. It should be a [font-awesome](http://fontawesome.io/) class name.

| onClick | Custom on click method specific for this item (overrides onMenuItemClick).

| extras | Optional container for additional data.

## Roadmap

Any contribution is welcome.

TODO:

 - split code into two units: JS object configuration and Component configuration

 - tests & CI support

 - refactor examples code