diff options
author | Jamie Kyle <me@thejameskyle.com> | 2019-05-14 02:31:32 +0300 |
---|---|---|
committer | Jamie Kyle <me@thejameskyle.com> | 2019-05-14 02:31:32 +0300 |
commit | f75e4529109640e39e527cdadda66d5e748ab1bf (patch) | |
tree | 0edacda1d2ad832e034a86d5c47c540d37c43f0d /README.md | |
parent | badab5b6aba05a76abeb5e87fc4c531fd1a04d68 (diff) |
add initialState
Diffstat (limited to 'README.md')
-rw-r--r-- | README.md | 32 |
1 files changed, 27 insertions, 5 deletions
@@ -45,8 +45,8 @@ import React, { useState } from "react" import { createContainer } from "unstated-next" import { render } from "react-dom" -function useCounter() { - let [count, setCount] = useState(0) +function useCounter(initialState = 0) { + let [count, setCount] = useState(initialState) let decrement = () => setCount(count - 1) let increment = () => setCount(count + 1) return { count, decrement, increment } @@ -69,7 +69,13 @@ function App() { return ( <Counter.Provider> <CounterDisplay /> - <CounterDisplay /> + <Counter.Provider initialState={2}> + <div> + <div> + <CounterDisplay /> + </div> + </div> + </Counter.Provider> </Counter.Provider> ) } @@ -77,7 +83,6 @@ function App() { render(<App />, document.getElementById("root")) ``` - ## API ### `createContainer(useHook)` @@ -107,6 +112,23 @@ function ParentComponent() { } ``` +### `<Container.Provider initialState>` + +```js +function useCustomHook(initialState = "") { + let [value, setValue] = useState(initialState) + // ... +} + +function ParentComponent() { + return ( + <Container.Provider initialState={"value"}> + <ChildComponent /> + </Container.Provider> + ) +} +``` + ### `Container.useContainer()` ```js @@ -500,7 +522,7 @@ I've intentionally published this as a separate package name because it is a com Please provide me with feedback on that migration process, because over the next few months I hope to take that feedback and do two things: - Make sure `unstated-next` fulfills all the needs of `unstated` users. -- Make sure `unstated` has a clean migration process towards `unstated-next`. +- Make sure `unstated` has a clean migration process towards `unstated-next`. I may choose to add APIs to either library to make life easier for developers. For `unstated-next` I promise that the added APIs will be as minimal as possible and I'll try to keep the library small. |