jamiebuilds · Andarist · Feb 1, 2018
diff --git a/example/codesandbox/complex.js b/example/codesandbox/complex.js
@@ -0,0 +1,81 @@
+// @flow
+import React from 'react';
+import { render } from 'react-dom';
+import { Provider, Subscribe, Container } from 'unstated';
+
+type AppState = {
+  amount: number
+};
+
+class AppContainer extends Container<AppState> {
+  state = {
+    amount: 1
+  };
+
+  setAmount(amount: number) {
+    this.setState({ amount });
+  }
+}
+
+type CounterState = {
+  count: number
+};
+
+class CounterContainer extends Container<CounterState> {
+  state = {
+    count: 0
+  };
+
+  increment(amount: number) {
+    this.setState({ count: this.state.count + amount });
+  }
+
+  decrement(amount: number) {
+    this.setState({ count: this.state.count - amount });
+  }
+}
+
+function Counter() {
+  return (
+    <Subscribe to={[AppContainer, CounterContainer]}>
+      {(app, counter) => (
+        <div>
+          <span>Count: {counter.state.count}</span>
+          <button onClick={() => counter.decrement(app.state.amount)}>-</button>
+          <button onClick={() => counter.increment(app.state.amount)}>+</button>
+        </div>
+      )}
+    </Subscribe>
+  );
+}
+
+function App() {
+  return (
+    <Subscribe to={[AppContainer]}>
+      {app => (
+        <div>
+          <Counter />
+          <label>Amount: </label>
+          <input
+            type="number"
+            value={app.state.amount}
+            onChange={event => {
+              const amount = parseInt(event.currentTarget.value, 10);
+              if (Number.isNaN(amount)) {
+                return;
+              }
+              app.setAmount(amount);
+            }}
+          />
+        </div>
+      )}
+    </Subscribe>
+  );
+}
+
+render(
+  <Provider>
+    <App />
+  </Provider>,
+  window.complex
+);
diff --git a/example/codesandbox/index.html b/example/codesandbox/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Unstated - Examples</title>
+  </head>
+  <body>
+    <h3>Simple</h3>
+    <div id="simple"></div>
+
+    <h3>Complex</h3>
+    <div id="complex"></div>
+  </body>
+</html>
diff --git a/example/codesandbox/index.js b/example/codesandbox/index.js
@@ -0,0 +1,2 @@
+import './simple.js';
+import './complex.js';
diff --git a/example/codesandbox/package.json b/example/codesandbox/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "unstated-example",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "create-react-context": "^0.1.4",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-scripts": "1.1.0",
+    "unstated": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/example/simple.js → example/codesandbox/simple.js b/example/simple.js → example/codesandbox/simple.js
@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { render } from 'react-dom';
-import { Provider, Subscribe, Container } from '../src/unstated';
+import { Provider, Subscribe, Container } from 'unstated';
 
 type CounterState = {
   count: number

diff --git a/example/package.json b/example/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "unstated-example",
+  "version": "0.0.0",
+  "private": true,
+  "main": "complex.js",
+  "dependencies": {
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-scripts": "1.1.0",
+    "unstated": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/example/parcel/complex.js b/example/parcel/complex.js
@@ -0,0 +1,81 @@
+// @flow
+import React from 'react';
+import { render } from 'react-dom';
+import { Provider, Subscribe, Container } from '../../src/unstated';
+
+type AppState = {
+  amount: number
+};
+
+class AppContainer extends Container<AppState> {
+  state = {
+    amount: 1
+  };
+
+  setAmount(amount: number) {
+    this.setState({ amount });
+  }
+}
+
+type CounterState = {
+  count: number
+};
+
+class CounterContainer extends Container<CounterState> {
+  state = {
+    count: 0
+  };
+
+  increment(amount: number) {
+    this.setState({ count: this.state.count + amount });
+  }
+
+  decrement(amount: number) {
+    this.setState({ count: this.state.count - amount });
+  }
+}
+
+function Counter() {
+  return (
+    <Subscribe to={[AppContainer, CounterContainer]}>
+      {(app, counter) => (
+        <div>
+          <span>Count: {counter.state.count}</span>
+          <button onClick={() => counter.decrement(app.state.amount)}>-</button>
+          <button onClick={() => counter.increment(app.state.amount)}>+</button>
+        </div>
+      )}
+    </Subscribe>
+  );
+}
+
+function App() {
+  return (
+    <Subscribe to={[AppContainer]}>
+      {app => (
+        <div>
+          <Counter />
+          <label>Amount: </label>
+          <input
+            type="number"
+            value={app.state.amount}
+            onChange={event => {
+              const amount = parseInt(event.currentTarget.value, 10);
+              if (Number.isNaN(amount)) {
+                return;
+              }
+              app.setAmount(amount);
+            }}
+          />
+        </div>
+      )}
+    </Subscribe>
+  );
+}
+
+render(
+  <Provider>
+    <App />
+  </Provider>,
+  window.complex
+);
diff --git a/example/index.html → example/parcel/index.html b/example/index.html → example/parcel/index.html
diff --git a/example/parcel/simple.js b/example/parcel/simple.js
@@ -0,0 +1,41 @@
+// @flow
+import React from 'react';
+import { render } from 'react-dom';
+import { Provider, Subscribe, Container } from '../../src/unstated';
+
+type CounterState = {
+  count: number
+};
+
+class CounterContainer extends Container<CounterState> {
+  state = { count: 0 };
+
+  increment() {
+    this.setState({ count: this.state.count + 1 });
+  }
+
+  decrement() {
+    this.setState({ count: this.state.count - 1 });
+  }
+}
+
+function Counter() {
+  return (
+    <Subscribe to={[CounterContainer]}>
+      {counter => (
+        <div>
+          <button onClick={() => counter.decrement()}>-</button>
+          <span>{counter.state.count}</span>
+          <button onClick={() => counter.increment()}>+</button>
+        </div>
+      )}
+    </Subscribe>
+  );
+}
+
+render(
+  <Provider>
+    <Counter />
+  </Provider>,
+  window.simple
+);
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "format": "prettier --write **/*.{js,json,md}",
     "prepublish": "yarn run build",
     "precommit": "lint-staged",
-    "example": "parcel example/index.html"
+    "example": "parcel example/parcel/index.html"
   },
   "peerDependencies": {
     "create-react-context": "^0.1.4",