react-simple-offcanvas

A stand-alone react component for adding accessible easy-to-use bootstrap Tabs to your project.

Usage no npm install needed!

<script type="module">
  import reactSimpleOffcanvas from 'https://cdn.skypack.dev/react-simple-offcanvas';
</script>

README

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 npm bundle size GitHub

screenshot

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


Edit react-simple-offcanvas

License

MIT © awran5