react-simple-offcanvas
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.9 • Public • Published

    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

    Install

    npm i react-simple-offcanvas

    DownloadsWeekly Downloads

    37

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    23.9 kB

    Total Files

    9

    Last publish

    Collaborators

    • awran5