https://github.com/atom2ueki/react-drawer
react.js drawer component
https://github.com/atom2ueki/react-drawer
quality react travis-ci
Last synced: 8 months ago
JSON representation
react.js drawer component
- Host: GitHub
- URL: https://github.com/atom2ueki/react-drawer
- Owner: atom2ueki
- License: mit
- Created: 2016-02-03T07:30:54.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T13:30:53.000Z (almost 3 years ago)
- Last Synced: 2025-02-07T19:34:46.650Z (8 months ago)
- Topics: quality, react, travis-ci
- Language: JavaScript
- Homepage:
- Size: 1.12 MB
- Stars: 41
- Watchers: 7
- Forks: 22
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
react-drawer (1.3.4)
==============
Simple HTML5 drawer menu for React.js.
[![NPM][npm-icon] ][npm-url]
[](https://996.icu)
[![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';
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
top
bottom
left
right
No overlay
(The overlay lets you close the drawer on click)
{!this.state.open ? show drawer: close drawer}
What a nice drawer !
);
}
}
ReactDOM.render(, document.getElementById('app'));
```
Todo
========
- [x] basic features
- [x] open position option
- [x] drawer open method
- [ ] themes
License
=======
MIT