├── .gitignore
├── tsconfig.json
├── package.json
├── src
    └── index.ts
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | lib/


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2016",
 4 |     "module": "commonjs",
 5 |     "declaration": true,
 6 |     "outDir": "./lib",
 7 |     "strict": true,
 8 |     "jsx": "react",
 9 |     "esModuleInterop": true
10 |   },
11 |   "include": [
12 |     "src"
13 |   ],
14 |   "exclude": [
15 |     "node_modules",
16 |     "**/__tests__/*"
17 |   ]
18 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ehto",
 3 |   "version": "0.1.1",
 4 |   "description": "A simple React store",
 5 |   "main": "lib/index.js",
 6 |   "types": "lib/index.d.ts",
 7 |   "scripts": {
 8 |     "build": "tsc",
 9 |     "prepare": "npm run build"
10 |   },
11 |   "peerDependencies": {
12 |     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
13 |   },
14 |   "files": [
15 |     "lib/**/*",
16 |     "README.md"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | 
 3 | type IStore<T> = {
 4 |   state: T;
 5 |   subscribers: ((value: T) => void)[];
 6 |   setState: (value: T) => void;
 7 |   subscribe: (subscriber: (value: T) => void) => () => void;
 8 | };
 9 | 
10 | export function createStore<U>(initial: U) {
11 |   const store: IStore<U> = {
12 |     state: initial,
13 |     subscribers: [],
14 |     setState(newState) {
15 |       this.state = newState;
16 |       this.subscribers.forEach((subscriber) => subscriber(this.state));
17 |     },
18 |     subscribe(subscriber) {
19 |       this.subscribers.push(subscriber);
20 |       return () => {
21 |         this.subscribers = this.subscribers.filter((sub) => sub !== subscriber);
22 |       };
23 |     },
24 |   };
25 | 
26 |   function useStore() {
27 |     const [state, setState] = useState(store.state);
28 | 
29 |     useEffect(() => {
30 |       const unsubscribe = store.subscribe(setState);
31 |       return unsubscribe;
32 |     }, []);
33 | 
34 |     const setGlobalState = (newState: U) => {
35 |       store.setState(newState);
36 |     };
37 | 
38 |     return [state, setGlobalState] as const;
39 |   }
40 | 
41 |   return useStore;
42 | }
43 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Ehto
 2 | 
 3 | A lightweight shared state management library for React applications.
 4 | 
 5 | ## Features
 6 | 
 7 | - Simple API
 8 | - TypeScript support
 9 | - Lightweight (only 1.4 KB)
10 | - No external dependencies
11 | 
12 | ## Installation
13 | 
14 | ```bash
15 | npm install ehto
16 | ```
17 | ```bash
18 | yarn add ehto
19 | ```
20 | ```bash
21 | pnpm add ehto
22 | ```
23 | 
24 | ## Usage
25 | ### Creating a store
26 | ```ts
27 | import { createStore } from "ehto";
28 | 
29 | const useStore = createStore(0);
30 | 
31 | export const useCounterStore = () => {
32 |   const [state, setState] = useStore();
33 |   const Increment = () => {
34 |     setState(state + 1);
35 |   };
36 |   const Decrement = () => {
37 |     setState(state - 1);
38 |   };
39 |   return {
40 |     state,
41 |     Increment,
42 |     Decrement,
43 |   };
44 | };
45 | ```
46 | 
47 | ### Using the store in component
48 | ```tsx
49 | import { useCounterStore } from "./useCounterStore";
50 | 
51 | export function Counter() {
52 |   const { Increment, Decrement, state } = useCounterStore();
53 |   return (
54 |     <div>
55 |       <span>{state}</span>
56 |       <button onClick={Increment}>Inc</button>
57 |       <button onClick={Decrement}>Dec</button>
58 |     </div>
59 |   );
60 | }
61 | ```
62 | 
63 | ## API
64 | 
65 | ### createStore(initialState)
66 | Creates a new store with the given initial state.
67 | Returns a react hook with getter and setter
68 | 
69 | ### useStore()
70 | A hook for using and updating the store state in React components.
71 | Returns a tuple `[state, setState]`:
72 | 
73 | `state:` the current store state
74 | `setState:` a function to update the state
75 | 
76 | ## License
77 | ### MIT


--------------------------------------------------------------------------------