https://github.com/marco-streng/styled-off-canvas
A simple off canvas menu built with styled-components 💅
https://github.com/marco-streng/styled-off-canvas
mobile navigation off-canvas react styled-components
Last synced: 12 months ago
JSON representation
A simple off canvas menu built with styled-components 💅
- Host: GitHub
- URL: https://github.com/marco-streng/styled-off-canvas
- Owner: marco-streng
- License: mit
- Created: 2019-11-15T08:45:47.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-11-20T09:38:26.000Z (over 1 year ago)
- Last Synced: 2025-06-25T00:30:04.149Z (about 1 year ago)
- Topics: mobile, navigation, off-canvas, react, styled-components
- Language: TypeScript
- Homepage: styled-off-canvas.vercel.app
- Size: 6.27 MB
- Stars: 77
- Watchers: 2
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
💅 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](https://reactjs.org/) and [styled-components](https://www.styled-components.com/)
## 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.
```javascript
const { isOpen, toggle, close, open } = useOffCanvas();
``````
### Components
`styled-off-canvas` comes with three components: ``, `` and ``.
`` is a wrapping component which provides the menus context.
`` is the off-canvas menu itself. You can pass anything you want as children (e.g. styled list of router links)
`` is an optional component which renders a semi-transparent layer above your app content.
### Example
```javascript
import React, { useState } from 'react'
import { StyledOffCanvas, Menu, Overlay } from 'styled-off-canvas'
const Navigation = () => {
const { close } = useOffCanvas();
return (
close()} />
);
};
const Burger = () => {
const { isOpen, toggle } = useOffCanvas();
return (
toggle()} />
);
};
const App = () => {
return (
this is some nice content!
);
};
export default App
```
### Properties
`` 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)
`` 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 `` and `` can additionally be customized with styled-components
```jsx
// example
...
```
## License
Copyright (c) 2024-present Marco Streng. See [LICENSE](./LICENSE.md) for details.