Introduction: styled-off-canvas

As a big fan of styled-components, I always had the need for an Off-Canvas or Burger-Menu in my projects.

When working with styled-components, it feels unpleasant to use one of the plain CSS based menus. You have to import .css files, you probably have to overwrite some styling, your styling is divided in 'two worlds': plain CSS and styled-components. So I wrote styled-off-canvas.

Demo

Yes, there is a DEMO

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.

Implementation

This is a simple example of how to use styled-off-canvas. You can also find a code example here.

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

Customization

There are a lot of properties to customize the menu, like for example: colors, position, size or transition-duration.
Additionally you can use the styled-components css property on every component.

Plans for the future

styled-off-canvas should stay lightweight and simple. So I don't want hundrets of options and possibilities. Currently I'm thinking about adding some transition to the page content.

Suggestions or feedback

If you got any kind of feedback, suggestions or ideas - feel free! Write a comment below this article or fork/clone from GitHub. There is always space for improvement!