Simple HTML5 drawer menu for React.js.
The easiest way to use react-drawer is to install it from npm and include it in your React build process (using Webpack, Browserify, etc).
npm install --save react-drawer
Create a standalone module using WebPack:
> npm install
> webpack
https://jmfrancois.github.io/react-drawer/
// 1. keep monitor changes to /src/*
> npm run build:watch
// 2. open dev server
> npm start
// 3. visit http://localhost:3000/example/
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDrawer from 'react-drawer';
import 'react-drawer/lib/react-drawer.css';
class Main extends React.Component {
constructor() {
super();
this.state = {
open: false,
position: 'right',
noOverlay: false
};
this.toggleDrawer = this.toggleDrawer.bind(this);
this.closeDrawer = this.closeDrawer.bind(this);
this.onDrawerClose = this.onDrawerClose.bind(this);
this.setPosition = this.setPosition.bind(this);
this.setNoOverlay = this.setNoOverlay.bind(this);
}
setPosition(e) {
this.setState({position: e.target.value});
}
setNoOverlay(e) {
this.setState({noOverlay: e.target.checked});
}
toggleDrawer() {
this.setState({open: !this.state.open});
}
closeDrawer() {
this.setState({open: false});
}
onDrawerClose() {
this.setState({open: false});
}
render() {
return (
<div>
<div style={{margin: 200}}>
<h1>React Drawer configuration</h1>
<div style={{margin: 20}}>
<label>Position</label>
<select value={this.state.position} onChange={this.setPosition}>
<option value="top">top</option>
<option value="bottom">bottom</option>
<option value="left">left</option>
<option value="right">right</option>
</select>
</div>
<div style={{margin: 20}}>
<input type="checkbox"
checked={this.state.noOverlay}
onChange={this.setNoOverlay}
/>
<label>No overlay</label>
<small>(The overlay lets you close the drawer on click)</small>
</div>
<button
style={{margin: 20}}
onClick={this.toggleDrawer}
disabled={this.state.open && !this.state.noOverlay}
>
{!this.state.open ? <span>show drawer</span>: <span>close drawer</span>}
</button>
</div>
<ReactDrawer
open={this.state.open}
position={this.state.position}
onClose={this.onDrawerClose}
noOverlay={this.state.noOverlay}>
<i onClick={this.closeDrawer} className="icono-cross"></i>
<h2>What a nice drawer !</h2>
</ReactDrawer>
</div>
);
}
}
ReactDOM.render(<Main />, document.getElementById('app'));- basic features
- open position option
- drawer open method
- themes
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent