Simple to implement React offcanvas menu
npm install react-offcanvas-menu-componentReact offcanvas menu is "out of the box" solution for adding offcanvas menu to your react project in less than a minute. It comes packed with page "push" effect, unlimited submenus and header and footer sections.
To install offcanvas menu, use:
``npm install --save react-offcanvas-menu-component`
Then include it into your project:
`javascript`
import OffcanvasMenu from 'react-offcanvas-menu-component';
You can use react offcanvas menu with router or defualt links. If you want to use it with router you will need to pass 2 additional parameters, otherwise it will fallback to `` links by default.
React offcanvas menu takes 5 arguments, but only 1 is required. You can provide only menu items and menu is ready to be used. But if you want to add more features, here is the list of all parameters:
- `Link` To use router option with react offcanvas menu you need to supply Link component from react-router-dom package. More on this later in examples.`
- location` If you want to use router, alogn with the `link` you will need to include `location` parameter that can be obtained by wrapping the menu with `withRouter` method from react-router-dom `
- menu` this is the parameter that will contain array of objects representing your menu structure. Each object contains `text` of the menu, `link` a page route link, and optional `submenu` property to which you can pass submenu links in an array of object with same properties as for the parent menu. More on this in examples section.`
- header` If you want to include header section, like logo, or brand name, you pass component or content to this parameter.`
- footer` - to add additional links, or any other content to the bottom of the offcanvas menu, pass it to this paramater.`
- config` parameter has few properties you can use to configurate some menu features. To enable push behavior of the menu (when opened it will push the current page) set `push` param to `true`. If you want menu to be opened by default when page loads, set `isOpen` param to `true`. To set the width of the menu use `width` param, and add pass it a number value. To apply the light skin, use `skin` param and pass it `light` value.
You can also check example and demo app with react offcanvas menu here
basic usage example (quick offcanvas menu with `` links system):
`javascript`
{text: 'Home', link: '/'},
{text: 'Pages', link: '/page', submenu: [
{text: 'Page 1', link: '/page/1'},
{text: 'Page 2', link: '/page/2'}
]},
{text: 'Contact', link: '/contact'}
]}
/>
To use router with react offcanvas menu, you need to create a custom component that will hold the menu and export it using `withRouter`:
`javascript
// you will need link and withRouter from react router dom
import {Link, withRouter} from 'react-router-dom';
// And you will need react offcanvas menu offcourse :)
import OffcanvasMenu from 'react-offcanvas-menu-component';
// name you menu component and pass the location parameter
// that will be drilled from withRouter
function Menu({location}) {
return(
location={location} // location parameter passed from Router
config={{
width: 300, // you can modify default width
push: true // if you want to enable push feature
}}
// this is where you create your menu items
menu={[
// basic menu item
{text: 'Home', link: '/'},
// menu item with submenu
{text: 'Pages', link: '/page', submenu: [
{text: 'Page 1', link: '/page/1'},
{text: 'Page 2', link: '/page/2'}
]}
]}
header={ // you can add logo to the header for example
}
footer={} // if you want content in footer
/>
)
}
// some quick markup for the footer section of offcanvas menu
const Footer = () => {
return(
// You need to wrap export with withRouter
// so you can access the location prop in your component
// and pass it to the react-offcanvas-menu
export default withRouter(Menu);
`
Than just include your `Menu`` component into your project.