react-classic-drawer

1.1.4 • Public • Published

react-classic-drawer

A classic and simple implement of react drawer;

Note: Your React version should be at least 16+!

install

npm install react-classic-drawer react-addons-css-transition-group --save

example

https://johnsnow93.github.io/react-classic-drawer/

usage

import Drawer from 'react-classic-drawer';
import 'react-classic-drawer/build/style.css'

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      visible: false,
    }
  }

  render() {
    return (
      <div>
        <button onClick={()=>{ this.setState({ visible: true }) }}>open</button>
        <Drawer visible={this.state.visible} direction="LEFT">
          <h2>This is drawer's content</h2>
          <p>Just put content here as Drawer's children</p>
        </Drawer>
      </div>
    )
  }

}

API

React classic drawer as a component can receive props:

name type default description
visible boolean false set drawer open or close
direction enum[string] 'RIGHT' set drawer direction, one of 'LEFT','RIGHT','TOP','BOTTOM'
duration number 500 set milliseconds for animation when drawer open and close
onClose function -- callback function on drawer close or mask layer is clicked
contentClass string -- set a classname for the wrapper of drawer content

Dependencies (0)

    Dev Dependencies (19)

    Package Sidebar

    Install

    npm i react-classic-drawer

    Weekly Downloads

    2

    Version

    1.1.4

    License

    none

    Unpacked Size

    25.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • johnsnow93