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.

!npm bundle size
!GitHub

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 (
Provider props / }>
Trigger props / } />
Offcanvas props / } />

)
}
`

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` |

---


$3

MIT © awran5