React Flexible Sliding Menu
Edit page
IntroductionGetting StartedInstallationBasic UsageDemo
Animations
API
Examples
Contributing

Getting Started

Installation

Start by installing react-flexible-sliding-menu as a dependency with npm :

npm i react-flexible-sliding-menu

or if you are using yarn :

yarn add react-flexible-sliding-menu

Basic Usage

1. Wrap with MenuProvider

Wrap your <App/> with the <MenuProvider/>, and pass in the MenuComponent.

import MenuProvider from 'react-flexible-sliding-menu';
import YourMenuComponent from 'path/to/your/MenuComponent';
<MenuProvider MenuComponent={YourMenuComponent}>
    <App/>
</MenuProvider>

2. Open the Menu using Context

Now, from anywhere within your <App/> useContext and open the menu.

import React, { useContext } from 'react';
import { MenuContext } from 'react-flexible-sliding-menu';
const App = () => {
    const { toggleMenu } = useContext(MenuContext);
    return (
        <div>
            <h1>App</h1>
            <button onClick={toggleMenu} >
                Toggle Menu
            </button>
        </div>
    )
}

Demo

After adding some additional content and styles we will get: