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.

Install

npm

npm i react-simple-offcanvas

Yarn

yarn add react-simple-offcanvas

Usage

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

export default function App() {
  return (
    <OffcanvasProvider { /* Provider props */ }>
      <Trigger { /* Trigger props */ } />
      <Offcanvas { /* Offcanvas props */ } />
    </OffcanvasProvider>
  )
}

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 |

License

MIT © awran5