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: 3 days 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 (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-09-12T10:03:48.000Z (4 months ago)
• Last Synced: 2024-10-14T07:44:33.753Z (3 months ago)
• Topics: mobile, navigation, off-canvas, react, styled-components
• Language: TypeScript
• Homepage: styled-off-canvas.vercel.app
• Size: 6.27 MB
• Stars: 74
• 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.