0.0.4 • Published 5 years ago

react-mobile-drawer v0.0.4

Weekly downloads
43
License
MIT
Repository
github
Last release
5 years ago

react-mobile-drawer

Simple react drawer component with touch events support

Example: https://ilyacuc.github.io/react-mobile-drawer/

Usage

import React from "react";
import ReactDOM from "react-dom";
import Drawer from 'react-mobile-drawer';

class App extends React.PureComponent {
constructor(props) {
    super(props);
    this.state = {
        isOpen: false
    }
}

closeDrawer = () => {
    this.setState({isOpen: false});
}

openDrawer = () => {
    this.setState({isOpen: true});
}

render() {
    return (
        <div>
            <Drawer isOpen={this.state.isOpen} closeDrawer={this.closeDrawer} openDrawer={this.openDrawer}>
                <div>Menu content here</div>
            </Drawer>
            <button onClick={this.openDrawer}>Open Drawer</button>
            <div>Main content here</div>
        </div>
    );
}
}

ReactDOM.render(<App/>, document.getElementById("app"));

Props

Prop NameDefault ValueDescription
isOpenfalsecontrols state of drawer
backdropClassNameempty stringclass name to style backdrop
drawerClassNameempty stringclass name to style drawer container
width80drawer width in %
sideZoneWidth30width of side drawing zone in px
closeDrawerempty functionfunction to control state of drawer
openDrawerempty functionfunction to control state of drawer