React Offcanvas Component

Create Off-canvas Sidebars with React and Popmotion's pose

Installation

This npm module utilizes react-pose for animations.

yarn

yarn add react-pose react-offcanvas-component

npm

npm i -S react-pose react-offcanvas-component

Demo

Basic usage

Please visit this Repo for examples.

API

ReactOffcanvasComponent

| Prop | Type | Default | Required | Description | | ---------------- | --------- | --------------------------------------------- | -------- | ----------------------------------------------------------------------------- | | open | Boolean | false | yes | Setting values as true will Reveal Sidebar and false will Hide Sidebar | | className | String | no | no | Override the styles applied to the component with css | | style | Object | no | no | Override the styles applied to the component with inline styles | | openAnimation | Object | See Default Animations | no | Override the default open animation | | closeAnimation | Object | See Default Animations | no | Override the default close animation | | overlay | Boolean | false | no | Show / Hide background overlay | | overlayClassName | String | no | no | Override the default styles applied to the Overlay component with css classes |

AnimatedPanel

| Prop | Type | Default | Required | Description | | -------------- | -------- | --------------------------------------------- | -------- | --------------------------------------------------------------- | | className | String | no | no | Override the styles applied to the component with css | | style | Object | no | no | Override the styles applied to the component with inline styles | | openAnimation | Object | See Default Animations | no | Override the default open animation | | closeAnimation | Object | See Default Animations | no | Override the default close animation |

CloseButton

| Prop | Type | Default | Required | Description | | --------- | ---------- | ------- | -------- | --------------------------------------------------------------- | | onClick | Function | no | no | function(event: object) => void | | style | Object | no | no | Override the styles applied to the component with inline styles | | className | String | no | no | Override the styles applied to the component with css |

DropdownMenu

| Prop | Type | Default | Required | Description | | --------- | -------- | ------- | -------- | --------------------------------------------------------------- | | style | Object | no | no | Override the styles applied to the component with inline styles | | className | String | no | no | Override the styles applied to the component with css |

DropdownMenu

| Prop | Type | Default | Required | Description | | --------- | -------- | ------- | -------- | ----------------------------------------------------- | | className | String | no | no | Override the styles applied to the component with css |

MenuItem

| Prop | Type | Default | Required | Description | | --------------------- | ---------- | ------- | -------- | ----------------------------------------------------------------- | | style | Object | no | no | Override the styles applied to the component with inline styles | | className | String | no | no | Override the styles applied to the component with css | | onClick | Function | no | no | function(event: object) => void | | dropdownIconClassName | String | no | no | Override the styles applied to the dropdown menu icon with css | | hasDropdown | Boolean | no | no | If the MenuItem contains a dropdown menu set this value to true |

Default Animations

I have used react-pose to create the animations. A tons of customization possible via pose api.

ReactOffcanvasComponent

Open

{
  x: "-100px",
  transition: {
    ease: [0.175, 0.885, 0.32, 1.275],
    duration: 300
  },
  delayChildren: 150,
  staggerChildren: 100
}

Close

{
  x: "-100%",
  transition: {
    duration: 100
  },
  afterChildren: true
}

AnimatedPanel

Open

{
  x: "0%",
  transition: {
    ease: [0.175, 0.885, 0.32, 1.275],
    duration: 300
  },
  delayChildren: 300,
  staggerChildren: 100
}

Close

{
  x: "-100%",
  transition: {
    duration: 100
  },
  afterChildren: true
}

Todo:

• Add tests and coverage reports