rc-drawer

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'));