thegrtnx / react-simple-offcanvas Goto Github PK

View Code? Open in Web Editor NEW

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

License: MIT License

JavaScript 17.69% TypeScript 49.26% CSS 18.22% HTML 14.83%

react-simple-offcanvas's Introduction

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`