React component for adding a hidden sidebars to your project. Simply this is a Bootstrap 5 Offcanvas component but without installing any dependencies.
npm i react-simple-offcanvas
yarn add react-simple-offcanvas
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>
)
}
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 |
- |
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 |
- |
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 |
MIT © awran5