react-drawers

Collapsible docked panels for React

Install

npm install --save react-drawers

Usage

import React, { Component } from 'react'
import Layout from 'react-drawers'

class MyComponent extends Component {
  render() {
    return (
      <Layout className="classname-applied-to-content">
        <Layout.Top className="top-classname">
          Top
        </Layout.Top>
        <Layout.Left className="left-classname">
          Left
        </Layout.Left>
        <Layout.Right className="right-classname">
          Right
        </Layout.Right>
        <Layout.Bottom className="bottom-classname">
          Bottom
        </Layout.Bottom>
        {/* 
          The following is custom content, and will be displayed as the content of the page
          In this example, I put some button arranged in a flower-like shape
          Each button controls the collapsing of one of the drawers
        */}
        <div className="flex-1 flex-col justify-content-center">
          <div>
            <div className="flex-row justify-content-center">
              <Layout.Switch top>
                {({ open, toggle }) => (
                  <button onClick={toggle}>Toggle top</button>
                )}
              </Layout.Switch>
            </div>
            <div className="flex-row justify-content-center">
              <Layout.Switch left>
                {({ open, toggle }) => (
                  <button onClick={toggle}>Toggle left</button>
                )}
              </Layout.Switch>
              <Layout.Switch right>
                {({ open, toggle }) => (
                  <button onClick={toggle}>Toggle right</button>
                )}
              </Layout.Switch>
            </div>
            <div className="flex-row justify-content-center">
              <Layout.Switch bottom>
                {({ open, toggle }) => (
                  <button onClick={toggle}>Toggle bottom</button>
                )}
              </Layout.Switch>
            </div>
          </div>
        </div>
      </Layout>
    )
  }
}

class App extends Component {

  render() {
    return (
      <Layout.Master top={65} left={200} right={150} bottom={20}>
        <MyComponent />
      </Layout.Master>
    )
  }

}

Docs

Layout.Master

This is the context component that defines the sizing and the initial state of the layout. You are expected to render this only once at the root of your application

Available properties

| Property | Type | Description | | -------------------- | ------ | -------------------------------------------------------------------------------------- | | top | int | The height of the top drawer | | left | int | The width of the left drawer | | right | int | The width of the right drawer | | bottom | int | The height of the bottom drawer | | topOpenOnStart | bool | Whether to spawn the top drawer open or closed | | leftOpenOnStart | bool | Whether to spawn the left drawer open or closed | | rightOpenOnStart | bool | Whether to spawn the right drawer open or closed | | bottomOpenOnStart | bool | Whether to spawn the bottom drawer open or closed | | topCollapsedWidth | int | The dimension of the top drawer when it is in the collapsed state | | leftCollapsedWidth | int | The dimension of the left drawer when it is in the collapsed state | | rightCollapsedWidth | int | The dimension of the right drawer when it is in the collapsed state | | bottomCollapsedWidth | int | The dimension of the bottom drawer when it is in the collapsed state | | topOverContent | bool | True if top drawer should cover content when open, false otherwise (default: false) | | leftOverContent | bool | True if left drawer should cover content when open, false otherwise (default: false) | | rightOverContent | bool | True if right drawer should cover content when open, false otherwise (default: false) | | bottomOverContent | bool | True if bottom drawer should cover content when open, false otherwise (default: false) | | mode | string | The definition of how to solve the overlapping of drawers, see later |

The mode property is used to define how the drawers overlap when they are open simultaneously. Not all the possible overlappings are currently supported. A mode is any anagram of the word TLBR, where T stands for Top, L for Left and so on. The earlier the letter appears in the string, the higher the priority of the drawer. The drawer corresponding to the first letter covers all the others, the drawer correponding to the second letter is covered by the first (in case they overlap) but covers the other two, and so on.

Example: TBLR mode has Top and Bottom spanning the entire width of the screen, and Left and Right starting from the bottom edge of Top and ending on the top edge of Bottom

Example: LTBR mode has Left spanning the entire height of the screen, Top and Bottom starting from the right edge of Left and ending on the right edge of the screen, and Right spanning the height between Top and Bottom

Layout

This is the component that wraps a single page where you want to enable drawers. It is required that any content of your page is a child of the Layout component, and that drawers (like Layout.Top or Layout.Left) are direct children of the Layout component (beware of React.Fragment)

Available properties

| Property | Type | Description | | ----------------- | ------ | -------------------------------------------------------------------- | | className | string | The classname to apply to the content container | | absolute | bool | If true, use absolute positioning (by default, it uses fixed) |

Layout.Left

This is the component that represents the Left drawer. Any child of this component will be rendered in the Left drawer. Insert it in a Layout component where you need to enable the Left drawer.

Available properties

| Property | Type | Description | | ----------------- | ------ | -------------------------------------------------------------------- | | className | string | The classname to apply to the content container |

Layout.Top

This is the component that represents the Top drawer. Any child of this component will be rendered in the Top drawer. Insert it in a Layout component where you need to enable the Top drawer.

Available properties

| Property | Type | Description | | ----------------- | ------ | -------------------------------------------------------------------- | | className | string | The classname to apply to the content container |

Layout.Right

This is the component that represents the Right drawer. Any child of this component will be rendered in the Right drawer. Insert it in a Layout component where you need to enable the Right drawer.

Available properties

| Property | Type | Description | | ----------------- | ------ | -------------------------------------------------------------------- | | className | string | The classname to apply to the content container |

Layout.Bottom

This is the component that represents the Bottom drawer. Any child of this component will be rendered in the Bottom drawer. Insert it in a Layout component where you need to enable the Bottom drawer.

Available properties

| Property | Type | Description | | ----------------- | ------ | -------------------------------------------------------------------- | | className | string | The classname to apply to the content container |

Layout.Content

The drawer layout is designed to allow the normal vertical scrolling of the page in case the content does not fit the screen. In other words the height of the body usually depends on its content, and setting it to match the height of the viewport can become cumbersome. For this reason the library provides the Layout.Content component, which is granted to fill the area left free by drawers and to animate according to the open and close transitions of the drawers

Available properties

| Property | Type | Description | | ----------------- | ------ | -------------------------------------------------------------------- | | className | string | The classname to apply to the content container |

Layout.Switch

This component is a utility to build buttons that make the drawer collapse or expand. It takes a function as a child, which is given an object with two properties: the state (called open) of the controlled drawer (true means open drawer), and the toggle function used to toggle the state of the drawer. It is safe to put a switch inside a drawer. It is not advisable to put the only switch for a drawer inside the very same drawer (because, when the drawer is collapsed, there are no ways to expand the drawer again with that very same switch).

Available properties

| Property | Type | Description | | ----------------- | ------ | ------------------------------------------------------------------------- | | left | bool | true if this button should control the left drawer, false otherwise | | right | bool | true if this button should control the right drawer, false otherwise | | top | bool | true if this button should control the top drawer, false otherwise | | bottom | bool | true if this button should control the bottom drawer, false otherwise |

Only one of this properties must be set at a time. In case you try to set more than one, the one with the highest priority will be taken into account. Priority order is left, right, top, bottom. If none of these is set, the behaviour of the component is undefined.

Programmatic control of drawers

Starting from version 1.4.0, it is possible to use some hooks to programmatically control drawers, like in the following example

import { useLeftDrawer } from "react-drawers"

const MyComponent = () => {
  const { close } = useLeftDrawer()
  return (
    <button type="button" onClick={() => close()}>Close left drawer</button>
  )
}

There are four hooks (one for each drawer): useTopDrawer, useRightDrawer, useBottomDrawer and useLeftDrawer. All of them have the same return value, which consists of a JavaScript object with the following properties

• open, function to force the drawer to open
• close, function to force the drawer to close
• toggle, function to toggle the drawer
• isOpen, boolean that states if the drawer is open or closed

License

MIT © Inmagik s.r.l.