diff --git a/example/codesandbox/complex.js b/example/codesandbox/complex.js new file mode 100644 index 0000000..94529cd --- /dev/null +++ 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 { + state = { + amount: 1 + }; + + setAmount(amount: number) { + this.setState({ amount }); + } +} + +type CounterState = { + count: number +}; + +class CounterContainer extends Container { + 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 ( + + {(app, counter) => ( +
+ Count: {counter.state.count} + + +
+ )} + + ); +} + +function App() { + return ( + + {app => ( +
+ + + { + const amount = parseInt(event.currentTarget.value, 10); + if (Number.isNaN(amount)) { + return; + } + app.setAmount(amount); + }} + /> +
+ )} + + ); +} + +render( + + + , + window.complex +); diff --git a/example/codesandbox/index.html b/example/codesandbox/index.html new file mode 100644 index 0000000..02380bb --- /dev/null +++ b/example/codesandbox/index.html @@ -0,0 +1,14 @@ + + + + + Unstated - Examples + + +

Simple

+
+ +

Complex

+
+ + diff --git a/example/codesandbox/index.js b/example/codesandbox/index.js new file mode 100644 index 0000000..50ea3a1 --- /dev/null +++ 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 new file mode 100644 index 0000000..4c84600 --- /dev/null +++ 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 b/example/codesandbox/simple.js similarity index 91% rename from example/simple.js rename to example/codesandbox/simple.js index 7681782..a97452e 100644 --- a/example/simple.js +++ b/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 new file mode 100644 index 0000000..c21fc07 --- /dev/null +++ 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 new file mode 100644 index 0000000..57143fd --- /dev/null +++ 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 { + state = { + amount: 1 + }; + + setAmount(amount: number) { + this.setState({ amount }); + } +} + +type CounterState = { + count: number +}; + +class CounterContainer extends Container { + 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 ( + + {(app, counter) => ( +
+ Count: {counter.state.count} + + +
+ )} + + ); +} + +function App() { + return ( + + {app => ( +
+ + + { + const amount = parseInt(event.currentTarget.value, 10); + if (Number.isNaN(amount)) { + return; + } + app.setAmount(amount); + }} + /> +
+ )} + + ); +} + +render( + + + , + window.complex +); diff --git a/example/index.html b/example/parcel/index.html similarity index 100% rename from example/index.html rename to example/parcel/index.html diff --git a/example/parcel/simple.js b/example/parcel/simple.js new file mode 100644 index 0000000..97a422a --- /dev/null +++ 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 { + state = { count: 0 }; + + increment() { + this.setState({ count: this.state.count + 1 }); + } + + decrement() { + this.setState({ count: this.state.count - 1 }); + } +} + +function Counter() { + return ( + + {counter => ( +
+ + {counter.state.count} + +
+ )} + + ); +} + +render( + + + , + window.simple +); diff --git a/package.json b/package.json index 4b2b46e..07b3b99 100644 --- 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",