Nomenclature Predictably Misunderstood
    Wondering what’s next for npm?Check out our public roadmap! »

    react-sidemenu

    1.1.0 • Public • Published

    react-sidemenu

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

    Features

    • Pure React.js, no external dependencies
    • Configure via JSON 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.

    Demo & Examples

    Demo showcasing the functionalities & code examples. We use Font Awesome as a CDN for the example icons to show.

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

    npm install
    npm start
    

    The examples are run using Webpack development server.

    Options

    <SideMenu> - main component

    Option Default Description
    items null Property for the JSON configuration of the component SideMenu component. Check out Demo 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).
    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 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
    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
    rtl false This property enables you to use the sidemenu in a right-to-left page. Demo
    shouldTriggerClickOnParents false This property enables triggering 'onMenuItemClick' on parent items that have children.

    <Item> - this component is for the non-JSON config of the menu

    Option Description
    value This is the link where you will be redirected after you click the item or the value attribute inside method onMenuItemClick
    label This is the representative value of the item
    icon This is the representative icon of the item. It should be font-awesome class name.
    onClick Custom on click method specific for this item (overrides onMenuItemClick).
    extras Container for additional data. (Not required)

    Roadmap

    Any contribution is welcome.

    To be done:

    • tests & CI support
    • refactor examples code (it's awful, I know)

    Install

    npm i react-sidemenu

    DownloadsWeekly Downloads

    721

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    43.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar
    • avatar