rc-drawer

What is rc-drawer?

The rc-drawer package is a React component that provides a drawer panel that can slide in from the edge of the screen. It is commonly used for implementing side menus, navigation, or other hidden content that can be revealed interactively.

What are rc-drawer's main functionalities?

Basic Drawer

This code sample demonstrates how to create a basic drawer that can be toggled open and closed with a button. The drawer's visibility is controlled by the 'open' state.

import Drawer from 'rc-drawer';
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  state = {
    open: false,
  };

  onOpenChange = (open) => {
    this.setState({ open });
  };

  render() {
    return (
      <div>
        <button onClick={() => this.onOpenChange(true)}>Open Drawer</button>
        <Drawer
          open={this.state.open}
          onOpenChange={this.onOpenChange}
        >
          <p>This is the content of the drawer.</p>
        </Drawer>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

Positioning

This code sample shows how to position the drawer on the right side of the screen. The 'position' prop can be set to 'left', 'right', 'top', or 'bottom'.

import Drawer from 'rc-drawer';
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  state = {
    open: false,
  };

  onOpenChange = (open) => {
    this.setState({ open });
  };

  render() {
    return (
      <Drawer
        open={this.state.open}
        position='right'
        onOpenChange={this.onOpenChange}
      >
        <p>This drawer slides in from the right.</p>
      </Drawer>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

Custom Styling

This code sample illustrates how to apply custom styles to the drawer. The 'style' prop accepts a JavaScript object with CSS properties.

import Drawer from 'rc-drawer';
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return (
      <Drawer
        open={true}
        style={{ backgroundColor: 'lightblue' }}
      >
        <p>Custom styled drawer content.</p>
      </Drawer>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

Other packages similar to rc-drawer

react-drawer

react-drawer is another React component that provides similar functionality for creating off-canvas drawers. It allows for easy customization and has a similar API to rc-drawer, but it may have different implementation details and additional features.

material-ui

material-ui is a comprehensive React UI framework that includes a Drawer component among its many components. The Drawer in material-ui is styled according to Material Design guidelines and is highly customizable, but it is part of a larger framework rather than a standalone package like rc-drawer.

react-sidebar

react-sidebar is a sidebar library for React. It allows for the creation of sidebars similar to the drawers provided by rc-drawer. This package offers a simple API and can be a good alternative if you are looking for a package focused specifically on sidebars.

README

rc-drawer

---

React Drawer Component

Screenshots

Development

npm install
npm start

Example

http://localhost:8099/examples/

online example: http://react-component.github.io/drawer/

install

Usage

var Drawer = require('rc-drawer');
var React = require('react');
React.render(<Drawer />, container);

API

props

Property name	Type	Default	Description
className	String	''	additional css class of root dom node
prefixCls	String	'rci-sidebar'	prefix class
children	Anything React can render	n/a	The main content
sidebarStyle	object	{}	Inline styles.
contentStyle	object	{}	Inline styles.
overlayStyle	object	{}	Inline styles.
dragHandleStyle	object	{}	Inline styles.
sidebar	Anything React can render	n/a	The sidebar content
onOpenChange	function	n/a	Callback called when the sidebar wants to change the open prop. Happens after sliding the sidebar and when the overlay is clicked when the sidebar is open.
open	boolean	false	If the sidebar should be open
position	string	left, enum{'left', 'right', 'top', 'bottom'}	where to place the sidebar
docked	boolean	false	If the sidebar should be docked in document
transitions	boolean	true	If transitions should be enabled
touch	boolean	true	If touch gestures should be enabled
dragToggleDistance	number	30	Distance the sidebar has to be dragged before it will open/close after it is released.

change from https://github.com/balloob/react-sidebar

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rc-drawer is released under the MIT license.