Example

README.md

@@ -14,6 +14,10 @@
 
 Redux Bluetooth is a project which consists in two components: **webapp** middleware, is a redux middleware to dispatch actions via [web bluetooth](https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web#user_gesture_required). **peripheral** store, is a redux store which process actions received over bluetooth and notify changes on every store change. 
 
+<div align="center" markdown="1">
+  <img src="docs/example.gif" alt="React Bluetooth - Example" width="600">
+</div>
+
 ## Install
 
 ```shell

example/peripheral/package.json

@@ -50,6 +50,7 @@
   "dependencies": {
     "ink": "^0.1.2",
     "ink-redux": "^1.0.0",
+    "prop-types": "^15.5.10",
     "redux": "^3.7.1",
     "redux-bluetooth": "^0.1.1"
   }

example/peripheral/src/output.js

@@ -1,22 +0,0 @@
-const { h, mount, Component } = require('ink');
-const { Provider, connect } = require('ink-redux');
-
-export default (store) => {
-  class Counter extends Component {
-    render(props) {
-      return `Counter: ${props.counter}`;
-    }
-  }
-
-  const mapStateToProps = state => ({
-    counter: state,
-  });
-
-  const ConnectedCounter = connect(mapStateToProps)(Counter);
-
-  mount((
-    <Provider store={store}>
-      <ConnectedCounter />
-    </Provider>
-  ));
-};

example/peripheral/src/output.jsx

@@ -0,0 +1,38 @@
+/* eslint-disable react/react-in-jsx-scope */
+const { h, mount, Text } = require('ink');
+const { Provider, connect } = require('ink-redux');
+const PropTypes = require('prop-types');
+
+export default (store) => {
+  function Counter({ counter }) {
+    const color = {
+      blue: counter > 0,
+      red: counter < 0,
+    };
+    return (
+      <div>
+        Counter:
+        <Text {...color}> {counter}</Text>
+      </div>
+    );
+  }
+
+  Counter.propTypes = {
+    counter: PropTypes.number,
+  };
+  Counter.defaultProps = {
+    counter: 0,
+  };
+
+  const mapStateToProps = state => ({
+    counter: state,
+  });
+
+  const ConnectedCounter = connect(mapStateToProps)(Counter);
+
+  mount(
+    <Provider store={store}>
+      <ConnectedCounter />
+    </Provider>,
+  );
+};

example/webapp/src/app/component.jsx

@@ -18,10 +18,15 @@ export default class App extends PureComponent {
   render() {
     const { store, status, onIncrement, onDecrement } = this.props;
 
+    const counter = Number(store);
+    let className = 'app-counter';
+    if (counter > 0) className += ' app-counter--positive';
+    if (counter < 0) className += ' app-counter--negative';
+
     return (
       <div className="app">
         {status === 'CONNECTED' &&
-          <div className="app-counter">
+          <div className={className}>
             {store}
           </div>}
         <div className="app-actions">

example/webapp/src/app/style.css

@@ -12,9 +12,15 @@
   margin-bottom: 40px;
   line-height: calc(100vh - 200px);
   font-size: 80vh;
-  color: red;
+  color: black;
   text-align: center;
 }
+.app-counter--positive {
+  color: blue;
+}
+.app-counter--negative {
+  color: red;
+}
 
 .app-actions {
   height: 30px;