💅 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

# via npm
npm install styled-off-canvas

# via yarn
yarn install styled-off-canvas

Implementation

Hook

The useOffCanvas() hook provies the current state and all methods to contorl the menu.

const { isOpen, toggle, close, open } = useOffCanvas();

Components

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

<OffCanvasProvider /> is a wrapping component which provides the menus context.

<Menu /> is the off-canvas menu itself. You can pass anything you want as children (e.g. styled list of 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 Navigation = () => {
  const { close } = useOffCanvas();

  return (
    <Menu closeOnEsc>
      <CrossIcon onClick={() => close()} />
      <List />
    </Menu>
  );
};

const Burger = () => {
  const { isOpen, toggle } = useOffCanvas();

  return (
    <BurgerIcon onClick={() => toggle()} />
  );
};

const App = () => {
  return (
    <Container>
      <Burger />
      <Navigation />

      <div>this is some nice content!</div>

      <Overlay />
    </Container>
  );
};

export default App

Properties

<Menu /> component

• background = '#fff': background color of the menu
• duration = '500ms': duration of the css transition of the menu
• closeOnEsc = true: if the menu should close on esc keydown
• position = 'right': position of the menu (left or right)
• width = '300px': maximum width of the menu
• onClose: callback function if menu closes (e.g. by click on the overlay)

<Overlay /> component

• background = '#000': background color of the overlay
• duration = '500ms': duration of the open/close animation of the overlay
• opacity = 0.3: css opacity of the overlay

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

// example

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

License

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