aboutsummaryrefslogtreecommitdiff
path: root/readme.md
diff options
context:
space:
mode:
Diffstat (limited to 'readme.md')
-rw-r--r--readme.md44
1 files changed, 44 insertions, 0 deletions
diff --git a/readme.md b/readme.md
new file mode 100644
index 0000000..43665c5
--- /dev/null
+++ b/readme.md
@@ -0,0 +1,44 @@
+# unstated-next-compose
+
+Simple provider compose for [unstated-next](https://github.com/jamiebuilds/unstated-next)
+
+## Usage
+
+```
+import React, { useState } from 'react';
+import { createContainer } from 'unstated-next';
+
+import { Compose } from 'unstated-next-compose'; // <---
+
+const useProvider1 = () => {
+ const [a, setA] = useState(0);
+ return { a, setA }
+}
+
+const Provider1 = createContainer(useProvider1);
+
+const ComponentA = (props) => {
+ const { a, setA } = Provider1.useContainer()
+ return <button onClick={() => setA(a + 1)}>A={a}</button>
+}
+const useProvider2 = () => {
+ const [b, setB] = useState(0);
+ return { b, setB }
+}
+
+const Provider2 = createContainer(useProvider2);
+
+const ComponentB = (props) => {
+ const { b, setB } = Provider2.useContainer()
+ return <button onClick={() => setB(b + 1)}>B={b}</button>
+}
+
+const store = [Provider1.Provider, Provider2.Provider]; // <---
+
+export default () => (
+ <Compose providers={store}> // <---
+ <ComponentA />
+ <ComponentB />
+ </Compose>
+)
+``` \ No newline at end of file