atom2ueki / React Drawer
Licence: mit
react.js drawer component
Stars: ✭ 42
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Drawer
Dva Admin
A dashboard application built upon dva and ant-design
Stars: ✭ 19 (-54.76%)
Mutual labels: travis-ci
Svelte Redux Shopping Cart
Example Shopping Cart App using Svelte, Redux, and Webpack
Stars: ✭ 13 (-69.05%)
Mutual labels: travis-ci
Angular Library Starter Kit
Angular 5 Library Starter Kit based on Angular-CLI
Stars: ✭ 35 (-16.67%)
Mutual labels: travis-ci
Sonarondocker
🐳 📡 Docker way of running SonarQube + any DB
Stars: ✭ 25 (-40.48%)
Mutual labels: quality
Condition Travis
🚫 semantic-release plugin to check Travis CI environment before publishing.
Stars: ✭ 9 (-78.57%)
Mutual labels: travis-ci
Split tests
Utility to split test files into parallel CI containers
Stars: ✭ 21 (-50%)
Mutual labels: travis-ci
Jsql Injection
jSQL Injection is a Java application for automatic SQL database injection.
Stars: ✭ 891 (+2021.43%)
Mutual labels: travis-ci
Android Ndk
[Deprecated] Installed android-ndk for speedy cloning into Travis CI worker VM.
Stars: ✭ 38 (-9.52%)
Mutual labels: travis-ci
Nem Php
NEM Blockchain NIS API Wrapper and Software Development Kit for PHP
Stars: ✭ 32 (-23.81%)
Mutual labels: travis-ci
Zemeroth
😠⚔️😈 A minimalistic 2D turn-based tactical game in Rust
Stars: ✭ 940 (+2138.1%)
Mutual labels: travis-ci
Flask Bones
An example of a large scale Flask application using blueprints and extensions.
Stars: ✭ 849 (+1921.43%)
Mutual labels: travis-ci
Builds Tab
Web extension that adds builds tab to Github
Stars: ✭ 24 (-42.86%)
Mutual labels: travis-ci
Kitchen In Travis
Chef cookbook example to run test-kitchen inside Travis CI.
Stars: ✭ 36 (-14.29%)
Mutual labels: travis-ci
Nagios Plugins
450+ AWS, Hadoop, Cloud, Kafka, Docker, Elasticsearch, RabbitMQ, Redis, HBase, Solr, Cassandra, ZooKeeper, HDFS, Yarn, Hive, Presto, Drill, Impala, Consul, Spark, Jenkins, Travis CI, Git, MySQL, Linux, DNS, Whois, SSL Certs, Yum Security Updates, Kubernetes, Cloudera etc...
Stars: ✭ 1,000 (+2280.95%)
Mutual labels: travis-ci
Big Album Art
[RETIRED] A Flask app to display almost-fullscreen album art for your currently playing Spotify songs. Enjoy the visuals!
Stars: ✭ 38 (-9.52%)
Mutual labels: travis-ci
Fastp
An ultra-fast all-in-one FASTQ preprocessor (QC/adapters/trimming/filtering/splitting/merging...)
Stars: ✭ 966 (+2200%)
Mutual labels: quality
react-drawer (1.3.4)
Simple HTML5 drawer menu for React.js.
Installation
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
Demo
https://jmfrancois.github.io/react-drawer/
Run on your local & development
// 1. keep monitor changes to /src/*
> npm run build:watch
// 2. open dev server
> npm start
// 3. visit http://localhost:3000/example/
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'));
Todo
- [x] basic features
- [x] open position option
- [x] drawer open method
- [ ] themes
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].