77 | );
78 | }
79 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Hooksy
2 |
3 | Hooksy is state managment solution based on react hooks
4 |
5 | - extremly easy to use
6 | - no boilerplate
7 | - works great with typescript
8 | - composable
9 | - injectable to any component with 1 line of code
10 | - allows creating complex data solutions (like actions, selectors) intuitively
11 |
12 | [demo](https://pie6k.github.io/hooksy/)
13 |
14 | # Tutorial
15 |
16 | The best way to show how it works would be by example.
17 |
18 | Let's assume we've got user store that is used by many components across the page. You can log in and out.
19 |
20 | First - let's create the store:
21 |
22 | ```ts
23 | // userStore.ts
24 | import { createStore } from 'hooksy';
25 |
26 | interface UserData {
27 | username: string;
28 | }
29 |
30 | const defaultUser: UserData = { username: 'Foo' };
31 |
32 | export const [useUserStore] = createStore(defaultUser); // we've created store with initial value.
33 | // useUserStore has the same signature like react useState hook, but the state will be shared across all components using it
34 | ```
35 |
36 | Our store is ready and can be used inside any react component. If any component will modify user store state - all components using it will be re-rednered.
37 |
38 | Let's see how we can use the store now:
39 |
40 | ```ts
41 | import React from 'react';
42 |
43 | import { useUserStore } from './userStore';
44 |
45 | export function UserInfo() {
46 | const [user, setUser] = useUserStore();
47 |
48 | function login() {
49 | setUser({ username: 'Foo' })
50 | }
51 |
52 | return (
53 |