Add toggle component

.npmignore

@@ -6,3 +6,4 @@ README.md
 circle.yml
 coverage
 tests
+test-setup.js

README.md

@@ -39,7 +39,11 @@ export default QueryState(example);
 
 ## Toggle
 
-**Coming Soon**
+Toggle the display of data with three simple props!
+
+- [source](/src/toggle.js)
+- [tests](/tests/toggle.js)
+- [example](/example/src/example/toggle.js)
 
 ```js
 import { Toggle } from 'flashbang'

example/package.json

@@ -6,8 +6,8 @@
     "react-scripts": "1.0.13"
   },
   "dependencies": {
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
+    "react": "^16.0.0-rc.2",
+    "react-dom": "^16.0.0-rc.2",
     "react-router-dom": "^4.2.2"
   },
   "scripts": {

example/src/App.js

@@ -1,13 +1,15 @@
 import React, { Component } from 'react';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 
+import Toggle from './example/toggle';
 import QueryState from './example/query-state';
 
 class App extends Component {
   render() {
     return (
       <BrowserRouter>
         <Switch>
+          <Route path="/toggle" component={Toggle} />
           <Route path="/query-state" component={QueryState} />
         </Switch>
       </BrowserRouter>

example/src/example/toggle.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Toggle } from '../flashbang';
+
+export default ({ state, setState }) => (
+  <Toggle>
+    <div toggle>Click this to swap the content</div>
+
+    <div on>Toggle is now on!</div>
+    <div off>Click the toggle above to turn it on!</div>
+  </Toggle>
+);

example/src/flashbang/index.js

@@ -1 +1,2 @@
 export { default as QueryState } from './query-state';
+export { default as Toggle } from './toggle';

example/src/flashbang/toggle.js

@@ -0,0 +1,37 @@
+import React from 'react';
+
+export default class Toggle extends React.Component {
+  constructor() {
+    super();
+    this.state = {};
+  }
+
+  children(children) {
+    let { toggled } = this.state;
+
+    return React.Children.map(children, child => {
+      let { toggle, on, off, ...props } = child.props;
+
+      if (toggle)
+        return React.createElement(child.type, {
+          ...props,
+          onClick: () => this.setState({ toggled: !toggled }),
+        });
+
+      if (on) {
+        if (!toggled) return null;
+        return React.createElement(child.type, props);
+      }
+
+      if (off) {
+        if (toggled) return null;
+        return React.createElement(child.type, props);
+      }
+
+      return child;
+    });
+  }
+  render() {
+    return this.children(this.props.children);
+  }
+}