https://github.com/awran5/react-simple-offcanvas

React component for adding a hidden sidebars to your project. Simply this is a Bootstrap 5 Offcanvas component but without installing any dependencies.
https://github.com/awran5/react-simple-offcanvas

bootstrap-offcanvas react-component react-offcanvas-component react-typescript reactjs

Last synced: 6 days ago
JSON representation

React component for adding a hidden sidebars to your project. Simply this is a Bootstrap 5 Offcanvas component but without installing any dependencies.

• Host: GitHub
• URL: https://github.com/awran5/react-simple-offcanvas
• Owner: awran5
• License: mit
• Created: 2021-06-15T18:19:16.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-07-31T02:16:32.000Z (over 3 years ago)
• Last Synced: 2024-10-12T10:06:58.635Z (27 days ago)
• Topics: bootstrap-offcanvas, react-component, react-offcanvas-component, react-typescript, reactjs
• Language: TypeScript
• Homepage: https://react-offcanvas.vercel.app/
• Size: 1.72 MB
• Stars: 5
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Simple Offcanvas

> React component for adding a hidden sidebars to your project. Simply this is a Bootstrap 5 [Offcanvas](https://getbootstrap.com/docs/5.0/components/offcanvas/) component but without installing any dependencies.




[![NPM](https://img.shields.io/npm/v/react-simple-offcanvas.svg)](https://www.npmjs.com/package/react-simple-offcanvas)

![npm bundle size](https://img.shields.io/bundlephobia/min/react-simple-offcanvas)

![GitHub](https://img.shields.io/github/license/awran5/react-simple-offcanvas)



  



## Install

#### npm

```bash

npm i react-simple-offcanvas

```

#### Yarn

```bash

yarn add react-simple-offcanvas

```

## Usage

```jsx

import React from 'react'

import { OffcanvasProvider, Trigger, Offcanvas } from 'react-simple-offcanvas'

export default function App() {

  return (

    

      

      

    

  )

}

```




## 1. Provider Props

| Prop      |   Type   | Options  | Description                                                            | Default |

| --------- | :------: | -------- | ---------------------------------------------------------------------- | :-----: |

| `onOpen`  | Function | Optional | Callback `function` that is triggered when the Offcanvas is **opened** |   `-`   |

| `onClose` | Function | Optional | Callback `function` that is triggered when the Offcanvas is **closed** |   `-`   |




## 2. Trigger Props

| Prop        |     Type      | Options  | Description                                  |       Default       |

| ----------- | :-----------: | -------- | -------------------------------------------- | :-----------------: |

| `component` |    String     | Optional | Render Component `button` \| `div`           |      `button`       |

| `className` |    String     | Optional | CSS className applied to the `Trigger Block` | `offcanvas-trigger` |

| `styles`    | CSSProperties | Optional | Inline style                                 |        `{}`         |

| `children`  |   ReactNode   | Optional | Component children                           |         `-`         |




## 3. Offcanvas Props

| Prop             |     Type      | Options  | Description                                      |          Default           |

| ---------------- | :-----------: | -------- | ------------------------------------------------ | :------------------------: |

| `title`          |    String     | Optional | Offcanvas Title (`h5` Tag)                       |     `Offcanvas Title`      |

| `position`       |    String     | Optional | `left` \| `right` \| `top` \| `bottom`           |          `right`           |

| `backdrop`       |    boolean    | Optional | Apply a backdrop on body while offcanvas is open |           `true`           |

| `allowClickAway` |    boolean    | Optional | Closes the offcanvas when user click outside     |           `true`           |

| `allowEsc`       |    boolean    | Optional | Closes the offcanvas when escape key is pressed  |           `true`           |

| `allowScroll`    |    boolean    | Optional | Allow body scrolling while offcanvas is open     |           `true`           |

| `className`      |    String     | Optional | CSS className applied to the `Offcanvas Block`   |     `simple-offcanvas`     |

| `styles`         | CSSProperties | Optional | Inline style                                     |            `{}`            |

| `children`       |   ReactNode   | Optional | Component Children                               | `Some text as placeholder` |

---




[![Edit react-simple-offcanvas](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-simple-offcanvas-m8kkp?fontsize=14&hidenavigation=1&theme=dark)

### License

MIT © [awran5](https://github.com/awran5/)