💅 styled-off-canvas

A simple off canvas menu built with styled-components

Description

styled-off-canvas is a customizable off-canvas menu built with React and styled-components

Demo

A demo can be found here: Demo

Installation

yarn install styled-off-canvas
# or via npm
npm install styled-off-canvas

Implementation

For more flexibility you will keep the menu state (open or closed) in your application. The example below shows a very simple implementation.

Components

styled-off-canvas comes with three components: <StyledOffCanvas />, <Menu /> and <Overlay />.

<StyledOffCanvas /> is a wrapping component which provides all settings/properties.

<Menu /> is the off-canvas menu itself. You can pass anything you want as children (e.g. styled list of react-router links)

<Overlay /> is an optional component which renders a semi-transparent layer above your app content.

Example

import React, { useState } from 'react'
import { StyledOffCanvas, Menu, Overlay } from 'styled-off-canvas'

const App = () => {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <StyledOffCanvas
      isOpen={isOpen}
      onClose={() => setIsOpen(false)}
    >

      <button onClick={() => setIsOpen(!isOpen)}>Toggle menu</button>

      <Menu>
        <ul>
          <li>
            <a onClick={() => setIsOpen(false)}>close</a>
          </li>
          <li>
            <a href='/about'>About</a>
          </li>
          <li>
            <a href='/contact'>Contact</a>
          </li>
        </ul>
      </Menu>

      <Overlay />

      <div>this is some nice content!</div>
    </StyledOffCanvas>
  )
}

export default App

Properties

<StyledOffCanvas /> component

• isOpen = false: if the menu should be visible or not
• menuBackground = '#fff': background color of the menu
• menuDuration = '500ms': duration of the css transition of the menu
• onClose: callback function if menu closes (e.g. by click on the overlay)
• closeOnEsc = true: if the menu should close on esc keydown
• overlayBackground = '#000': background color of the overlay
• overlayDuration = '500ms': duration of the open/close animation of the overlay
• overlayOpacity = 0.2: css opacity of the overlay
• position = 'right': position of the menu (left or right)
• width = '300px': maximum width of the menu

Also <Menu /> and <Overlay /> can additionally be customized with styled-components

// example

<Menu css={{ border: `1px solid ${theme.menu.borderColor}` }}>...</Menu>

Local development

Install dependencies and start the development server

yarn
yarn dev

or via npm

npm install
npm run dev

Open localhost:8080 in your browser.

Resources

• https://reactjs.org/
• https://www.styled-components.com/
• https://jestjs.io/
• https://webpack.js.org/
• https://standardjs.com/
• https://stylelint.io/

License

Copyright (c) 2021-present Marco Streng. See LICENSE for details.