react-js-drawer v2.0.0

react-js-drawer

• Add native feeling to your web app and PWA by replicating Android/IOS native drawer.
• Swipe from the screen edge to open the drawer.
• Detect swipe momentum to open/close the drawer.
• Swipe gestures are available for touch and mouse input.

Drawer type standard

• Drawer type standard appears beside the page (co-planar with page content).
• Effects the page layout.
• When changePageWidth is enabled the drawer shares the body width with the page (the page shrinks when drawer opens).

• When changePageWidth is disabled the drawer will push page content and add it's width to the body causing scrollbar to appear.

Drawer type modal

• Drawer type modal appears on the top off the page.
• deosn't effect the page layout.

Installation

npm install react-js-drawer

How to use

• Make sure to put the drawer on the top of your main page.
• The drawer should have one sibling element (the page) for stability reasons.

// ...
import Drawer from 'react-js-drawer';

export default function App() {
  let drawerMethods = null;

  const openDrawerHandle = () => {
    drawerMethods.open();
  };

  return (
    <>
      <Drawer ref={node => (drawerMethods = node)}>{/* ... drawer content */}</Drawer>
      // wrap the page contents with container
      <div>
        // ... page contents
        <button onClick={openDrawerHandle}>Open Drawer</button>
      </div>
    </>
  );
}

Props

type : 'modal' | 'standard'

• modal : the drawer appears on top of the page (deosn't effect the page layout).
• standard : the drawer appears beside the page (effects the page layout).
• Default Value modal

standardOptions : Object

• Options for drawer type standard .

modalOptions : Object

• Options for drawer type modal .

direction : 'left' | 'right'

• Position the drawer on the left or on the right side of the Html page.
• Default Value left

defaultStatus : 'closed' | 'open'

• The initial status of the drawer.
• Default Value closed

width : Number

• The drawer width when it's open.
• Default Value 300

handleWidth : Number

• The drawer handle width, the handle is unvisible element that receive swipe gesture input.
• Default Value 20

handleBackgroundColor : String

• The drawer handle background color, use only for debuging.
• Default Value initial

duration : Number

• Drawer open and close animation duration.
• Default Value 200

ease : String | Function

• Drawer open and close animation transition timing function.
• Check easings.net to learn more.
• Default Value easeOutQuart
• If you want to provide your own timing-function make sure that the function takes one parameter and returns one value.

function easeInQuad(x) {
  return x * x;
}

enableMouseGestures : Boolean

• Enable open and close drawer with mouse swipe gestures.
• Default Value false

enableTouchGestures : Boolean

• Enable open and close drawer with touch swipe gestures.
• Default Value true

backgroundColor : Srting

• The background color of drawer shading layer.
• Default Value rgba(0,0,0,0.5)

drawerStyle : Object

• The drawer container style (React inline style object).
• You can also use id or className attributes to add style from CSS StyleSheet.

onOpen : Callback

• A callback fired when the drawer opens.

onClose : Callback

• A callback fired when the drawer closes.

onMove : (percent: Number) => void

• A callback fired everytime the drawer moves.
• Takes the percent argument (0-1) that indicates the open percentage of the drawer.

zIndex : Number

• Drawer wrapper element z-index css value.
• Default Value 100

Methods

• open()

• close()

• toggle()