diff options
Diffstat (limited to 'readme.md')
-rw-r--r-- | readme.md | 44 |
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 |