diff options
| author | Jamie Kyle <me@thejameskyle.com> | 2019-05-01 22:17:21 +0300 |
|---|---|---|
| committer | Jamie Kyle <me@thejameskyle.com> | 2019-05-02 03:45:10 +0300 |
| commit | 436fe821b81675f1aa6d03c30dc3a3604f8d2781 (patch) | |
| tree | bc750c1728f90ef75f4b266c25b3ee6707c1bb18 /example | |
init commit
Diffstat (limited to 'example')
| -rw-r--r-- | example/index.html | 13 | ||||
| -rw-r--r-- | example/index.tsx | 38 |
2 files changed, 51 insertions, 0 deletions
diff --git a/example/index.html b/example/index.html new file mode 100644 index 0000000..c3bc2f0 --- /dev/null +++ b/example/index.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta http-equiv="X-UA-Compatible" content="ie=edge" /> + <title>Document</title> + </head> + <body> + <div id="root"></div> + <script src="./index.tsx"></script> + </body> +</html> diff --git a/example/index.tsx b/example/index.tsx new file mode 100644 index 0000000..c967d9d --- /dev/null +++ b/example/index.tsx @@ -0,0 +1,38 @@ +import React, { useState } from "react" +import { Provider, createContainer } from "../src/unstated" +import { render } from "react-dom" + +function useCounter() { + let [count, setCount] = useState(0) + let decrement = () => setCount(count - 1) + let increment = () => setCount(count + 1) + return { count, decrement, increment } +} + +let Counter = createContainer(useCounter) + +function CounterDisplay() { + let counter = Counter.useContainer() + return ( + <> + <button onClick={counter.decrement}>-</button> + <span>{counter.count}</span> + <button onClick={counter.increment}>+</button> + </> + ) +} + +function App() { + return ( + <Provider> + <CounterDisplay /> + <div> + <div> + <CounterDisplay /> + </div> + </div> + </Provider> + ) +} + +render(<App />, document.getElementById("root")) |