💅 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
orright
) -
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.