react-drawer (1.3.4) ============== Simple HTML5 drawer menu for React.js. [![NPM][npm-icon] ][npm-url] [![Travis CI][travis-ci-image] ][travis-ci-url] [![Quality][quality-badge] ][quality-url] [![dependencies][dependencies-image] ][dependencies-url] [![devdependencies][devdependencies-image] ][devdependencies-url] [![semantic-release][semantic-release-image] ][semantic-release-url] [npm-icon]: https://nodei.co/npm/react-drawer.png?downloads=true [npm-url]: https://npmjs.org/package/react-drawer [travis-ci-image]: https://travis-ci.org/atom2ueki/react-drawer.svg?branch=master [travis-ci-url]: https://travis-ci.org/atom2ueki/react-drawer [semantic-release-image]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg [semantic-release-url]: https://github.com/semantic-release/semantic-release [dependencies-image]: https://david-dm.org/atom2ueki/react-drawer/status.svg [dependencies-url]: https://david-dm.org/atom2ueki/react-drawer [devdependencies-image]: https://david-dm.org/atom2ueki/react-drawer/dev-status.svg [devdependencies-url]: https://david-dm.org/atom2ueki/react-drawer#info=devDependencies [quality-badge]: http://npm.packagequality.com/shield/react-drawer.svg [quality-url]: http://packagequality.com/#?package=react-drawer Installation ============ The easiest way to use react-drawer is to install it from npm and include it in your React build process (using [Webpack](http://webpack.github.io/), [Browserify](http://browserify.org/), etc). ``` npm install --save react-drawer ``` Create a standalone module using *WebPack*: ``` > npm install > webpack ``` Demo ============ https://jmfrancois.github.io/react-drawer/ Run on your local & development ============ ``` bash // 1. keep monitor changes to /src/* > npm run build:watch // 2. open dev server > npm start // 3. visit http://localhost:3000/example/ ``` Example ===== ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import ReactDrawer from 'react-drawer'; /* if you using webpack, should not apply identity to this css */ 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 (

React Drawer configuration

Position

No overlay (The overlay lets you close the drawer on click)

What a nice drawer !

); } } ReactDOM.render(

, document.getElementById('app')); ``` Todo ======== - [x] basic features - [x] open position option - [x] drawer open method - [ ] themes License ======= MIT

	Stars	Issues	Version	Updated	Created
rc-drawer	405	30	7.1.0	3 months ago	8 years ago
rc-drawer-menu	405	30	1.1.0	6 years ago	6 years ago
react-drawer	41	14	1.3.4	6 years ago	8 years ago
react-hamburger-menu	105	17	1.2.1	4 years ago	8 years ago
rmc-drawer	54	15	0.4.11	6 years ago	6 years ago

rc-drawer vs rc-drawer-menu vs react-drawer vs react-hamburger-menu vs rmc-drawer

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past