diff --git a/README.md b/README.md index 9f6838f..0f6508f 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@
rex-state-logo - - ## `createRexStore` ```tsx diff --git a/example/src/stories/Counter.tsx b/example/src/stories/Counter.tsx new file mode 100644 index 0000000..e53a2fa --- /dev/null +++ b/example/src/stories/Counter.tsx @@ -0,0 +1,62 @@ +import React, { useState } from 'react'; +import { createRexStore } from 'rex-state'; + +const useCounterHook = (initialCount?: number) => { + const [count, setCount] = useState(initialCount || 0); + + const increaseCount = () => setCount(count + 1); + const decreaseCount = () => setCount(count - 1); + + return { + count, + increaseCount, + decreaseCount, + }; +}; + +const { useStore: useCounter, RexProvider: CountProvider } = createRexStore( + useCounterHook +); + +const CountDisplay = () => { + const { count } = useCounter(); + + return

{count}

; +}; + +const Controls = () => { + const { increaseCount, decreaseCount } = useCounter(); + + return ( + <> + + + + ); +}; + +export const CounterWithInitialValue = () => { + return ( + + + + + ); +}; + +export const CounterWithoutInitialValue = () => { + return ( + + + + + ); +}; diff --git a/example/src/stories/CounterWithInitialValue.stories.tsx b/example/src/stories/CounterWithInitialValue.stories.tsx new file mode 100644 index 0000000..c6e9598 --- /dev/null +++ b/example/src/stories/CounterWithInitialValue.stories.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import type { Story, Meta } from '@storybook/react/types-6-0'; +import { CounterWithInitialValue } from './Counter'; + +export default { + title: 'Example/Counter with Initial Value', + component: CounterWithInitialValue, +} as Meta; + +const Template: Story<{}> = (args) => ; + +export const WithInitialValue = Template.bind({}); +WithInitialValue.args = {}; diff --git a/example/src/stories/CounterWithoutInitialValue.stories.tsx b/example/src/stories/CounterWithoutInitialValue.stories.tsx new file mode 100644 index 0000000..0ef0b26 --- /dev/null +++ b/example/src/stories/CounterWithoutInitialValue.stories.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import type { Story, Meta } from '@storybook/react/types-6-0'; +import { CounterWithoutInitialValue } from './Counter'; + +export default { + title: 'Example/Counter without Initial Value', + component: CounterWithoutInitialValue, +} as Meta; + +const Template: Story<{}> = (args) => ; + +export const WithoutInitialValue = Template.bind({}); +WithoutInitialValue.args = {}; diff --git a/example/src/stories/GettingStarted.stories.mdx b/example/src/stories/GettingStarted.stories.mdx index 32ca59e..7354fbc 100644 --- a/example/src/stories/GettingStarted.stories.mdx +++ b/example/src/stories/GettingStarted.stories.mdx @@ -6,7 +6,7 @@ import { Text } from 'react-native'; rex-state-logo { -[build]: https://github.com/DaniAkash/rex-state/actions -[build-badge]: https://github.com/daniakash/rex-state/workflows/build/badge.svg -[coverage-badge]: https://api.codeclimate.com/v1/badges/f7954c1e1686cabeeb97/test_coverage -[coverage-url]: https://codeclimate.com/github/DaniAkash/rex-state/test_coverage -[maintainability-badge]: https://api.codeclimate.com/v1/badges/f7954c1e1686cabeeb97/maintainability -[maintainability-url]: https://codeclimate.com/github/DaniAkash/rex-state/maintainability +[build]: https://github.com/react-native-toolkit/rex-state/actions +[build-badge]: https://github.com/react-native-toolkit/rex-state/workflows/build/badge.svg +[coverage-badge]: https://api.codeclimate.com/v1/badges/9bd775907eca8a3dbab3/test_coverage +[coverage-url]: https://codeclimate.com/github/react-native-toolkit/rex-state/test_coverage +[maintainability-badge]: https://api.codeclimate.com/v1/badges/9bd775907eca8a3dbab3/maintainability +[maintainability-url]: https://codeclimate.com/github/react-native-toolkit/rex-state/maintainability [bundle-phobia-badge]: https://badgen.net/bundlephobia/minzip/rex-state [bundle-phobia]: https://bundlephobia.com/result?p=rex-state [downloads-badge]: https://img.shields.io/npm/dm/rex-state.svg