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 Name | Default Value | Description | |-----------|---------------|-------------| |isOpen| false | controls state of drawer| |backdropClassName| empty string | class name to style backdrop| |drawerClassName| empty string | class name to style drawer container| |width| 80 | drawer width in %| |sideZoneWidth| 30 | width of side drawing zone in px| |closeDrawer| empty function | function to control state of drawer| |openDrawer | empty function | function to control state of drawer|