add initialState

jamiebuilds · May 13, 2019 · f75e452 · f75e452
1 parent badab5b
commit f75e452
Show file tree

Hide file tree

Showing 8 changed files with 2,974 additions and 33 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@ node_modules
 example/dist
 dist
 .rts2_cache_*
+.cache
diff --git a/README-ru-ru.md b/README-ru-ru.md
@@ -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,15 +69,20 @@ function App() {
   return (
     <Counter.Provider>
       <CounterDisplay />
-      <CounterDisplay />
+      <Counter.Provider initialState={2}>
+        <div>
+          <div>
+            <CounterDisplay />
+          </div>
+        </div>
+      </Counter.Provider>
     </Counter.Provider>
   )
 }
 
 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
@@ -209,7 +231,7 @@ function App() {
 
 Это замечательно и прекрасно; чем больше людей будет писать в таком стиле, тем лучше.
 
-Однако стоит внести еще чуть больше структуры и ясности, чтобы API предельно четко выражал ваши намерения. 
+Однако стоит внести еще чуть больше структуры и ясности, чтобы API предельно четко выражал ваши намерения.
 
 Для этого мы добавили функцию `createContainer()`, чтобы можно было рассматривать ваши кастомные хуки как "контейнеры", чтобы наш четкий и ясный API просто невозможно было использовать неправильно.
 
@@ -499,7 +521,7 @@ Unstated Next и есть этот самый API. Вместо того, что
 Поделитесь своими впечатлениями о переходе на `unstated-next`, потому что в течение нескольких следующих месяцев я планирую на базе этой информации сделать две вещи:
 
 - Убедиться, что `unstated-next` удовлетворяет все нужды пользователей `unstated`.
-- Удостовериться, что для `unstated` есть четкий и ясный процесс миграции на `unstated-next`. 
+- Удостовериться, что для `unstated` есть четкий и ясный процесс миграции на `unstated-next`.
 
 Возможно, я добавлю какие-то API в старую или новую библиотеку, чтобы упростить жизнь разработчикам. Что касается `unstated-next`, я обещаю, что добавленные API будут минимальными, насколько это возможно, и я приложу все усилия, чтобы библиотека осталась маленькой.
 

diff --git a/README-zh-cn.md b/README-zh-cn.md
@@ -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>
   )
 }
@@ -106,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

diff --git a/README.md b/README.md
@@ -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,15 +69,20 @@ function App() {
   return (
     <Counter.Provider>
       <CounterDisplay />
-      <CounterDisplay />
+      <Counter.Provider initialState={2}>
+        <div>
+          <div>
+            <CounterDisplay />
+          </div>
+        </div>
+      </Counter.Provider>
     </Counter.Provider>
   )
 }
 
 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.
 

diff --git a/example/index.tsx b/example/index.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from "react"
-import { Provider, createContainer } from "../src/unstated"
+import { createContainer } from "../src/unstated-next"
 import { render } from "react-dom"
 
 function useCounter() {
-	let [count, setCount] = useState(0)
+	let [count, setCount] = useState(initialState)
 	let decrement = () => setCount(count - 1)
 	let increment = () => setCount(count + 1)
 	return { count, decrement, increment }
@@ -24,14 +24,16 @@ function CounterDisplay() {
 
 function App() {
 	return (
-		<Provider>
+		<Counter.Provider>
 			<CounterDisplay />
-			<div>
+			<Counter.Provider>
 				<div>
-					<CounterDisplay />
+					<div>
+						<CounterDisplay />
+					</div>
 				</div>
-			</div>
-		</Provider>
+			</Counter.Provider>
+		</Counter.Provider>
 	)
 }