react-state-bucket 1.1.4 → 1.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/cjs/index.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";"use client";var h=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var M=(s,l)=>{for(var i in l)h(s,i,{get:l[i],enumerable:!0})},B=(s,l,i,r)=>{if(l&&typeof l=="object"||typeof l=="function")for(let n of C(l))!E.call(s,n)&&n!==i&&h(s,n,{get:()=>l[n],enumerable:!(r=P(l,n))||r.enumerable});return s};var O=s=>B(h({},"__esModule",{value:!0}),s);var U={};M(U,{createBucket:()=>A});module.exports=O(U);var f=require("react");const A=(s,l)=>{const i=new Map;let r=new Map,n=new Map,g={store:"memory",...l};for(let e in s){let t=s[e];r.set(e,t),n.set(e,!0)}const d=(e=!0)=>{if(typeof window<"u"){let t=new URL(window.location.href);if(g.store==="session"||g.store==="local"){let o=g.store==="session"?sessionStorage:localStorage;for(let a in s){let x=o.getItem(a)!==null;e||!x?r.has(a)?o.setItem(a,r.get(a)):o.removeItem(a):x&&r.set(a,o.getItem(a))}}else if(g.store==="url"){for(let o in s){let a=t.searchParams.has(o);e||!a?r.has(o)?t.searchParams.set(o,r.get(o)):t.searchParams.delete(o):a&&r.set(o,t.searchParams.get(o))}window.history.replaceState(null,"",t.toString())}}};d(!1);let u=()=>{i.forEach(e=>{try{e()}catch{}}),d()};const y=(e,t)=>{if(!(e in s))throw new Error(`(${e}) Invalid key provided in the set function. Please verify the structure of the initial state data.`);r.set(e,t),n.set(e,!0),u()},T=e=>r.get(e),m=e=>{r.delete(e),n.set(e,!0),u()},k=()=>{for(let e in s)r.delete(e),n.set(e,!0);u()},p=()=>{let e={};for(let t in s)e[t]=r.get(t);return e},I=e=>{for(let t in e){if(!(t in s))throw new Error(`(${t}) Invalid key provided in the setState function. Please verify the structure of the initial state data.`);r.set(t,e[t]),n.set(t,!0)}u()},w=e=>n.get(e),S=()=>Array.from(n.keys()).filter(e=>n.get(e)),v=()=>Array.from(n.keys()).forEach(e=>n.set(e,!1)),c=()=>{const e=(0,f.useId)(),[t,o]=(0,f.useState)(0);(0,f.useEffect)(()=>(i.set(e,()=>o(Math.random())),()=>{i.delete(e)}),[]);const a=(0,f.useMemo)(()=>p(),[t]);return{set:y,get:T,delete:m,clear:k,getState:()=>a,setState:I,isChange:w,getChanges:S,clearChanges:v}};return c.set=y,c.get=T,c.delete=m,c.clear=k,c.getState=p,c.setState=I,c.isChange=w,c.getChanges=S,c.clearChanges=v,c};
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/index.ts"],
4
+ "sourcesContent": ["\"use client\"\nimport { useEffect, useId, useMemo, useState } from \"react\"\n\nexport type BucketOptions = {\n store?: \"memory\" | \"session\" | \"local\" | \"url\"\n}\n\nexport const createBucket = <IT extends { [key: string]: any }>(initial: IT, option?: BucketOptions) => {\n const hooks = new Map<string, Function>()\n let data = new Map<any, any>()\n let changes = new Map<string, boolean>()\n\n let _option: BucketOptions = {\n store: \"memory\",\n ...option,\n }\n\n for (let key in initial) {\n let value = initial[key]\n data.set(key, value)\n changes.set(key, true)\n }\n\n const handleStorage = (isLoaded = true) => {\n if (typeof window !== 'undefined') {\n let url = new URL(window.location.href)\n if (_option.store === 'session' || _option.store === 'local') {\n let storage = _option.store === \"session\" ? sessionStorage : localStorage\n for (let key in initial) {\n let has = storage.getItem(key) !== null\n if (isLoaded || !has) {\n data.has(key) ? storage.setItem(key, data.get(key)) : storage.removeItem(key)\n } else if (has) {\n data.set(key, storage.getItem(key))\n }\n }\n } else if (_option.store === \"url\") {\n for (let key in initial) {\n let has = url.searchParams.has(key)\n if (isLoaded || !has) {\n data.has(key) ? url.searchParams.set(key, data.get(key)) : url.searchParams.delete(key)\n } else if (has) {\n data.set(key, url.searchParams.get(key))\n }\n }\n window.history.replaceState(null, '', url.toString())\n }\n }\n }\n\n handleStorage(false)\n\n let dispatch = () => {\n hooks.forEach(d => {\n try { d() } catch (error) { }\n })\n handleStorage()\n }\n\n const set = <T extends keyof IT>(key: T, value: IT[T]) => {\n if (!(key in initial)) throw new Error(`(${key as string}) Invalid key provided in the set function. Please verify the structure of the initial state data.`)\n data.set(key, value)\n changes.set(key as string, true)\n dispatch()\n }\n\n const get = <T extends keyof IT>(key: T): IT[T] => data.get(key)\n const _delete = <T extends keyof IT>(key: T) => {\n data.delete(key)\n changes.set(key as string, true)\n dispatch()\n }\n\n const clear = () => {\n for (let key in initial) {\n data.delete(key)\n changes.set(key, true)\n }\n dispatch()\n }\n\n const getState = () => {\n let d: any = {}\n for (let key in initial) {\n d[key] = data.get(key)\n }\n return d as IT\n }\n\n const setState = (state: Partial<IT>) => {\n for (let key in state) {\n if (!(key in initial)) throw new Error(`(${key}) Invalid key provided in the setState function. Please verify the structure of the initial state data.`)\n data.set(key, state[key] as any)\n changes.set(key, true)\n }\n dispatch()\n }\n const isChange = <T extends keyof IT>(key: T) => changes.get(key as string)\n const getChanges = () => Array.from(changes.keys()).filter((key: string) => changes.get(key as string))\n const clearChanges = () => Array.from(changes.keys()).forEach((key: string) => changes.set(key, false))\n\n const useHook = () => {\n const id = useId()\n const [d, setUp] = useState(0)\n\n useEffect(() => {\n hooks.set(id, () => setUp(Math.random()))\n return () => {\n hooks.delete(id)\n }\n }, [])\n\n const state = useMemo(() => getState(), [d])\n\n return {\n set,\n get,\n delete: _delete,\n clear,\n getState: () => state,\n setState,\n isChange,\n getChanges,\n clearChanges,\n }\n }\n\n useHook.set = set\n useHook.get = get\n useHook.delete = _delete\n useHook.clear = clear\n useHook.getState = getState\n useHook.setState = setState\n useHook.isChange = isChange\n useHook.getChanges = getChanges\n useHook.clearChanges = clearChanges\n\n return useHook\n}"],
5
+ "mappings": "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",
6
+ "names": ["index_exports", "__export", "createBucket", "__toCommonJS", "import_react", "initial", "option", "hooks", "data", "changes", "_option", "key", "value", "handleStorage", "isLoaded", "url", "storage", "has", "dispatch", "d", "set", "get", "_delete", "clear", "getState", "setState", "state", "isChange", "getChanges", "clearChanges", "useHook", "id", "setUp"]
7
+ }
package/esm/index.js ADDED
@@ -0,0 +1,2 @@
1
+ "use client";import{useEffect as v,useId as x,useMemo as P,useState as C}from"react";const M=(l,S)=>{const f=new Map;let r=new Map,o=new Map,c={store:"memory",...S};for(let e in l){let t=l[e];r.set(e,t),o.set(e,!0)}const g=(e=!0)=>{if(typeof window<"u"){let t=new URL(window.location.href);if(c.store==="session"||c.store==="local"){let s=c.store==="session"?sessionStorage:localStorage;for(let n in l){let w=s.getItem(n)!==null;e||!w?r.has(n)?s.setItem(n,r.get(n)):s.removeItem(n):w&&r.set(n,s.getItem(n))}}else if(c.store==="url"){for(let s in l){let n=t.searchParams.has(s);e||!n?r.has(s)?t.searchParams.set(s,r.get(s)):t.searchParams.delete(s):n&&r.set(s,t.searchParams.get(s))}window.history.replaceState(null,"",t.toString())}}};g(!1);let i=()=>{f.forEach(e=>{try{e()}catch{}}),g()};const u=(e,t)=>{if(!(e in l))throw new Error(`(${e}) Invalid key provided in the set function. Please verify the structure of the initial state data.`);r.set(e,t),o.set(e,!0),i()},h=e=>r.get(e),d=e=>{r.delete(e),o.set(e,!0),i()},y=()=>{for(let e in l)r.delete(e),o.set(e,!0);i()},T=()=>{let e={};for(let t in l)e[t]=r.get(t);return e},m=e=>{for(let t in e){if(!(t in l))throw new Error(`(${t}) Invalid key provided in the setState function. Please verify the structure of the initial state data.`);r.set(t,e[t]),o.set(t,!0)}i()},k=e=>o.get(e),p=()=>Array.from(o.keys()).filter(e=>o.get(e)),I=()=>Array.from(o.keys()).forEach(e=>o.set(e,!1)),a=()=>{const e=x(),[t,s]=C(0);v(()=>(f.set(e,()=>s(Math.random())),()=>{f.delete(e)}),[]);const n=P(()=>T(),[t]);return{set:u,get:h,delete:d,clear:y,getState:()=>n,setState:m,isChange:k,getChanges:p,clearChanges:I}};return a.set=u,a.get=h,a.delete=d,a.clear=y,a.getState=T,a.setState=m,a.isChange=k,a.getChanges=p,a.clearChanges=I,a};export{M as createBucket};
2
+ //# sourceMappingURL=index.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../src/index.ts"],
3
+ "sources": ["../../src/index.ts"],
4
4
  "sourcesContent": ["\"use client\"\nimport { useEffect, useId, useMemo, useState } from \"react\"\n\nexport type BucketOptions = {\n store?: \"memory\" | \"session\" | \"local\" | \"url\"\n}\n\nexport const createBucket = <IT extends { [key: string]: any }>(initial: IT, option?: BucketOptions) => {\n const hooks = new Map<string, Function>()\n let data = new Map<any, any>()\n let changes = new Map<string, boolean>()\n\n let _option: BucketOptions = {\n store: \"memory\",\n ...option,\n }\n\n for (let key in initial) {\n let value = initial[key]\n data.set(key, value)\n changes.set(key, true)\n }\n\n const handleStorage = (isLoaded = true) => {\n if (typeof window !== 'undefined') {\n let url = new URL(window.location.href)\n if (_option.store === 'session' || _option.store === 'local') {\n let storage = _option.store === \"session\" ? sessionStorage : localStorage\n for (let key in initial) {\n let has = storage.getItem(key) !== null\n if (isLoaded || !has) {\n data.has(key) ? storage.setItem(key, data.get(key)) : storage.removeItem(key)\n } else if (has) {\n data.set(key, storage.getItem(key))\n }\n }\n } else if (_option.store === \"url\") {\n for (let key in initial) {\n let has = url.searchParams.has(key)\n if (isLoaded || !has) {\n data.has(key) ? url.searchParams.set(key, data.get(key)) : url.searchParams.delete(key)\n } else if (has) {\n data.set(key, url.searchParams.get(key))\n }\n }\n window.history.replaceState(null, '', url.toString())\n }\n }\n }\n\n handleStorage(false)\n\n let dispatch = () => {\n hooks.forEach(d => {\n try { d() } catch (error) { }\n })\n handleStorage()\n }\n\n const set = <T extends keyof IT>(key: T, value: IT[T]) => {\n if (!(key in initial)) throw new Error(`(${key as string}) Invalid key provided in the set function. Please verify the structure of the initial state data.`)\n data.set(key, value)\n changes.set(key as string, true)\n dispatch()\n }\n\n const get = <T extends keyof IT>(key: T): IT[T] => data.get(key)\n const _delete = <T extends keyof IT>(key: T) => {\n data.delete(key)\n changes.set(key as string, true)\n dispatch()\n }\n\n const clear = () => {\n for (let key in initial) {\n data.delete(key)\n changes.set(key, true)\n }\n dispatch()\n }\n\n const getState = () => {\n let d: any = {}\n for (let key in initial) {\n d[key] = data.get(key)\n }\n return d as IT\n }\n\n const setState = (state: Partial<IT>) => {\n for (let key in state) {\n if (!(key in initial)) throw new Error(`(${key}) Invalid key provided in the setState function. Please verify the structure of the initial state data.`)\n data.set(key, state[key] as any)\n changes.set(key, true)\n }\n dispatch()\n }\n const isChange = <T extends keyof IT>(key: T) => changes.get(key as string)\n const getChanges = () => Array.from(changes.keys()).filter((key: string) => changes.get(key as string))\n const clearChanges = () => Array.from(changes.keys()).forEach((key: string) => changes.set(key, false))\n\n const useHook = () => {\n const id = useId()\n const [d, setUp] = useState(0)\n\n useEffect(() => {\n hooks.set(id, () => setUp(Math.random()))\n return () => {\n hooks.delete(id)\n }\n }, [])\n\n const state = useMemo(() => getState(), [d])\n\n return {\n set,\n get,\n delete: _delete,\n clear,\n getState: () => state,\n setState,\n isChange,\n getChanges,\n clearChanges,\n }\n }\n\n useHook.set = set\n useHook.get = get\n useHook.delete = _delete\n useHook.clear = clear\n useHook.getState = getState\n useHook.setState = setState\n useHook.isChange = isChange\n useHook.getChanges = getChanges\n useHook.clearChanges = clearChanges\n\n return useHook\n}"],
5
- "mappings": "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",
6
- "names": []
5
+ "mappings": "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",
6
+ "names": ["useEffect", "useId", "useMemo", "useState", "createBucket", "initial", "option", "hooks", "data", "changes", "_option", "key", "value", "handleStorage", "isLoaded", "url", "storage", "has", "dispatch", "d", "set", "get", "_delete", "clear", "getState", "setState", "state", "isChange", "getChanges", "clearChanges", "useHook", "id", "setUp"]
7
7
  }
package/package.json CHANGED
@@ -1,14 +1,33 @@
1
1
  {
2
- "version": "1.1.4",
3
2
  "name": "react-state-bucket",
3
+ "version": "1.1.5",
4
+ "description": "A lightweight and powerful package designed to manage states globally in React applications. It provides CRUD operations for your state data with ease, enabling developers to handle complex state management scenarios without the need for heavy libraries.",
5
+ "main": "./index.js",
6
+ "module": "./esm/index.js",
7
+ "types": "./types/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "types": "./types/index.d.ts",
11
+ "import": "./esm/index.js",
12
+ "require": "./cjs/index.js"
13
+ },
14
+ "./*": {
15
+ "types": "./types/*.d.ts",
16
+ "import": "./esm/*.js",
17
+ "require": "./cjs/*.js"
18
+ },
19
+ "./types/*": "./types/*.d.ts",
20
+ "./esm/*": "./esm/*.js",
21
+ "./esm/*.js": "./esm/*.js",
22
+ "./cjs/*": "./cjs/*.js",
23
+ "./cjs/*.js": "./cjs/*.js"
24
+ },
4
25
  "author": "Naxrul Ahmed",
5
26
  "license": "MIT",
6
27
  "repository": {
7
28
  "type": "github",
8
29
  "url": "https://github.com/devnax/react-state-bucket.git"
9
30
  },
10
- "main": "./index.js",
11
- "description": "A lightweight and powerful package designed to manage states globally in React applications. It provides CRUD operations for your state data with ease, enabling developers to handle complex state management scenarios without the need for heavy libraries.",
12
31
  "bugs": {
13
32
  "url": "https://github.com/devnax/react-state-bucket/issues"
14
33
  },
@@ -21,7 +40,7 @@
21
40
  "devDependencies": {
22
41
  "@types/react": "^19.0.2",
23
42
  "@types/react-dom": "^19.0.2",
24
- "makepack": "^1.3.0",
43
+ "makepack": "^1.4.0",
25
44
  "react": "^19.0.0",
26
45
  "react-dom": "^19.0.0",
27
46
  "typescript": "^4.4.2"
package/readme.md CHANGED
@@ -1,233 +1,233 @@
1
- <p align="center">
2
- <img width="120" src="https://raw.githubusercontent.com/devnax/react-state-bucket/main/logo.png" alt="React State Bucket logo">
3
- </p>
4
-
5
- <h1 align="center">React State Bucket</h1>
6
-
7
- Effortlessly manage React application states with **react-state-bucket**, a lightweight yet powerful state management library.
8
-
9
- ---
10
-
11
- ## 🚀 Features
12
-
13
- - **Global State Management**: Manage state across your entire React application with ease.
14
- - **CRUD Operations**: Create, Read, Update, and Delete state values effortlessly.
15
- - **Multiple Storage Options**: Store state in "memory," "session storage," "local storage," or "URL parameters."
16
- - **Reactivity**: Automatically update components when the state changes.
17
- - **Custom Hooks**: Seamlessly integrate with React’s functional components.
18
- - **TypeScript Support**: Fully typed for a better development experience.
19
- - **Lightweight**: Small bundle size with no unnecessary dependencies.
20
-
21
- ---
22
-
23
- ## 📦 Installation
24
-
25
- Install the package via npm or yarn:
26
-
27
- ```bash
28
- # Using npm
29
- npm install react-state-bucket
30
-
31
- # Using yarn
32
- yarn add react-state-bucket
33
- ```
34
-
35
- ---
36
-
37
- ## 🔧 Setup and Usage
38
-
39
- ### Step 1: Create a State Bucket
40
-
41
- Define your initial state and actions:
42
-
43
- ```javascript
44
- import { createBucket } from 'react-state-bucket';
45
-
46
- const initialState = {
47
- count: 0,
48
- user: 'Guest',
49
- };
50
-
51
- export const useGlobalState = createBucket(initialState);
52
- ```
53
-
54
- ### Step 2: Use the State Bucket in a Component
55
-
56
- Access state and actions in your React components:
57
-
58
- ```javascript
59
- import React from 'react';
60
- import { useGlobalState } from './state';
61
-
62
- const App = () => {
63
- const globalState = useGlobalState();
64
-
65
- return (
66
- <div>
67
- <h1>Global State Management</h1>
68
- <p>Count: {globalState.get('count')}</p>
69
- <button onClick={() => globalState.set('count', globalState.get('count') + 1)}>Increment</button>
70
- <button onClick={() => globalState.delete('count')}>Reset Count</button>
71
- <pre>{JSON.stringify(globalState.getState(), null, 2)}</pre>
72
- </div>
73
- );
74
- };
75
-
76
- export default App;
77
- ```
78
-
79
- ---
80
-
81
- ## 🌟 Advanced Features
82
-
83
- ### Using Multiple Buckets
84
-
85
- ```javascript
86
- const useUserBucket = createBucket({ name: '', age: 0 });
87
- const useSettingsBucket = createBucket({ theme: 'light', notifications: true });
88
-
89
- function Profile() {
90
- const userBucket = useUserBucket();
91
- const settingsBucket = useSettingsBucket();
92
-
93
- return (
94
- <div>
95
- <h1>User Profile</h1>
96
- <button onClick={() => userBucket.set('name', 'John Doe')}>Set Name</button>
97
- <button onClick={() => settingsBucket.set('theme', 'dark')}>Change Theme</button>
98
- <pre>User State: {JSON.stringify(userBucket.getState(), null, 2)}</pre>
99
- <p>Current Theme: {settingsBucket.get('theme')}</p>
100
- </div>
101
- );
102
- }
103
- ```
104
-
105
- ### Persistent Storage Options
106
-
107
- ```javascript
108
- const usePersistentBucket = createBucket(
109
- { token: '', language: 'en' },
110
- { store: 'local' }
111
- );
112
-
113
- function PersistentExample() {
114
- const persistentBucket = usePersistentBucket();
115
-
116
- return (
117
- <div>
118
- <h1>Persistent Bucket</h1>
119
- <button onClick={() => persistentBucket.set('token', 'abc123')}>Set Token</button>
120
- <p>Token: {persistentBucket.get('token')}</p>
121
- </div>
122
- );
123
- }
124
- ```
125
-
126
- ### Reusing State Across Components
127
-
128
- ```javascript
129
- import React from 'react';
130
- import { createBucket } from 'react-state-bucket';
131
-
132
- const useGlobalState = createBucket({ count: 0, user: 'Guest' });
133
-
134
- function Counter() {
135
- const globalState = useGlobalState();
136
-
137
- return (
138
- <div>
139
- <h2>Counter Component</h2>
140
- <p>Count: {globalState.get('count')}</p>
141
- <button onClick={() => globalState.set('count', globalState.get('count') + 1)}>Increment Count</button>
142
- </div>
143
- );
144
- }
145
-
146
- function UserDisplay() {
147
- const globalState = useGlobalState();
148
-
149
- return (
150
- <div>
151
- <h2>User Component</h2>
152
- <p>Current User: {globalState.get('user')}</p>
153
- <button onClick={() => globalState.set('user', 'John Doe')}>Set User to John Doe</button>
154
- </div>
155
- );
156
- }
157
-
158
- function App() {
159
- return (
160
- <div>
161
- <h1>Global State Example</h1>
162
- <Counter />
163
- <UserDisplay />
164
- <pre>Global State: {JSON.stringify(useGlobalState().getState(), null, 2)}</pre>
165
- </div>
166
- );
167
- }
168
-
169
- export default App;
170
- ```
171
-
172
- ---
173
-
174
- ## 📘 API Reference
175
-
176
- ### `createBucket(initial: object, option?: BucketOptions)`
177
-
178
- Creates a new bucket for managing the global state.
179
-
180
- #### Parameters
181
-
182
- | Name | Type | Description |
183
- | --------- | --------- | ----------------------------------------- |
184
- | `initial` | `object` | Initial state values. |
185
- | `option` | `object?` | Optional configuration (default: memory). |
186
-
187
- #### `BucketOptions`
188
-
189
- `BucketOptions` allows you to configure how and where the state is stored. It includes:
190
-
191
- | Property | Type | Description |
192
- | -------- | ------------------------------------- | ---------------------------------------------- |
193
- | `store` | `'memory', 'session', 'local', 'url'` | Specifies the storage mechanism for the state. |
194
-
195
- ### Returned Functions
196
-
197
- #### State Management
198
-
199
- | Function | Description |
200
- | ----------------- | ----------------------------------------------------- |
201
- | `set(key, value)` | Sets the value of a specific key in the state. |
202
- | `get(key)` | Retrieves the value of a specific key from the state. |
203
- | `delete(key)` | Removes a key-value pair from the state. |
204
- | `clear()` | Clears all state values. |
205
- | `getState()` | Returns the entire state as an object. |
206
- | `setState(state)` | Updates the state with a partial object. |
207
-
208
- #### Change Detection
209
-
210
- | Function | Description |
211
- | ---------------- | ------------------------------------------- |
212
- | `isChange(key)` | Checks if a specific key has been modified. |
213
- | `getChanges()` | Returns an array of keys that have changed. |
214
- | `clearChanges()` | Resets the change detection for all keys. |
215
-
216
- ---
217
-
218
- ## 🤝 Contributing
219
-
220
- Contributions are welcome! Please check out the [contribution guidelines](https://github.com/devnax/react-state-bucket).
221
-
222
- ---
223
-
224
- ## 📄 License
225
-
226
- This project is licensed under the [MIT License](https://opensource.org/licenses/MIT).
227
-
228
- ---
229
-
230
- ## 📞 Support
231
-
232
- For help or suggestions, feel free to open an issue on [GitHub](https://github.com/devnax/react-state-bucket/issues) or contact us via [devnaxrul@gmail.com](mailto:devnaxrul@gmail.com).
233
-
1
+ <p align="center">
2
+ <img width="120" src="https://raw.githubusercontent.com/devnax/react-state-bucket/main/logo.png" alt="React State Bucket logo">
3
+ </p>
4
+
5
+ <h1 align="center">React State Bucket</h1>
6
+
7
+ Effortlessly manage React application states with **react-state-bucket**, a lightweight yet powerful state management library.
8
+
9
+ ---
10
+
11
+ ## 🚀 Features
12
+
13
+ - **Global State Management**: Manage state across your entire React application with ease.
14
+ - **CRUD Operations**: Create, Read, Update, and Delete state values effortlessly.
15
+ - **Multiple Storage Options**: Store state in "memory," "session storage," "local storage," or "URL parameters."
16
+ - **Reactivity**: Automatically update components when the state changes.
17
+ - **Custom Hooks**: Seamlessly integrate with React’s functional components.
18
+ - **TypeScript Support**: Fully typed for a better development experience.
19
+ - **Lightweight**: Small bundle size with no unnecessary dependencies.
20
+
21
+ ---
22
+
23
+ ## 📦 Installation
24
+
25
+ Install the package via npm or yarn:
26
+
27
+ ```bash
28
+ # Using npm
29
+ npm install react-state-bucket
30
+
31
+ # Using yarn
32
+ yarn add react-state-bucket
33
+ ```
34
+
35
+ ---
36
+
37
+ ## 🔧 Setup and Usage
38
+
39
+ ### Step 1: Create a State Bucket
40
+
41
+ Define your initial state and actions:
42
+
43
+ ```javascript
44
+ import { createBucket } from 'react-state-bucket';
45
+
46
+ const initialState = {
47
+ count: 0,
48
+ user: 'Guest',
49
+ };
50
+
51
+ export const useGlobalState = createBucket(initialState);
52
+ ```
53
+
54
+ ### Step 2: Use the State Bucket in a Component
55
+
56
+ Access state and actions in your React components:
57
+
58
+ ```javascript
59
+ import React from 'react';
60
+ import { useGlobalState } from './state';
61
+
62
+ const App = () => {
63
+ const globalState = useGlobalState();
64
+
65
+ return (
66
+ <div>
67
+ <h1>Global State Management</h1>
68
+ <p>Count: {globalState.get('count')}</p>
69
+ <button onClick={() => globalState.set('count', globalState.get('count') + 1)}>Increment</button>
70
+ <button onClick={() => globalState.delete('count')}>Reset Count</button>
71
+ <pre>{JSON.stringify(globalState.getState(), null, 2)}</pre>
72
+ </div>
73
+ );
74
+ };
75
+
76
+ export default App;
77
+ ```
78
+
79
+ ---
80
+
81
+ ## 🌟 Advanced Features
82
+
83
+ ### Using Multiple Buckets
84
+
85
+ ```javascript
86
+ const useUserBucket = createBucket({ name: '', age: 0 });
87
+ const useSettingsBucket = createBucket({ theme: 'light', notifications: true });
88
+
89
+ function Profile() {
90
+ const userBucket = useUserBucket();
91
+ const settingsBucket = useSettingsBucket();
92
+
93
+ return (
94
+ <div>
95
+ <h1>User Profile</h1>
96
+ <button onClick={() => userBucket.set('name', 'John Doe')}>Set Name</button>
97
+ <button onClick={() => settingsBucket.set('theme', 'dark')}>Change Theme</button>
98
+ <pre>User State: {JSON.stringify(userBucket.getState(), null, 2)}</pre>
99
+ <p>Current Theme: {settingsBucket.get('theme')}</p>
100
+ </div>
101
+ );
102
+ }
103
+ ```
104
+
105
+ ### Persistent Storage Options
106
+
107
+ ```javascript
108
+ const usePersistentBucket = createBucket(
109
+ { token: '', language: 'en' },
110
+ { store: 'local' }
111
+ );
112
+
113
+ function PersistentExample() {
114
+ const persistentBucket = usePersistentBucket();
115
+
116
+ return (
117
+ <div>
118
+ <h1>Persistent Bucket</h1>
119
+ <button onClick={() => persistentBucket.set('token', 'abc123')}>Set Token</button>
120
+ <p>Token: {persistentBucket.get('token')}</p>
121
+ </div>
122
+ );
123
+ }
124
+ ```
125
+
126
+ ### Reusing State Across Components
127
+
128
+ ```javascript
129
+ import React from 'react';
130
+ import { createBucket } from 'react-state-bucket';
131
+
132
+ const useGlobalState = createBucket({ count: 0, user: 'Guest' });
133
+
134
+ function Counter() {
135
+ const globalState = useGlobalState();
136
+
137
+ return (
138
+ <div>
139
+ <h2>Counter Component</h2>
140
+ <p>Count: {globalState.get('count')}</p>
141
+ <button onClick={() => globalState.set('count', globalState.get('count') + 1)}>Increment Count</button>
142
+ </div>
143
+ );
144
+ }
145
+
146
+ function UserDisplay() {
147
+ const globalState = useGlobalState();
148
+
149
+ return (
150
+ <div>
151
+ <h2>User Component</h2>
152
+ <p>Current User: {globalState.get('user')}</p>
153
+ <button onClick={() => globalState.set('user', 'John Doe')}>Set User to John Doe</button>
154
+ </div>
155
+ );
156
+ }
157
+
158
+ function App() {
159
+ return (
160
+ <div>
161
+ <h1>Global State Example</h1>
162
+ <Counter />
163
+ <UserDisplay />
164
+ <pre>Global State: {JSON.stringify(useGlobalState().getState(), null, 2)}</pre>
165
+ </div>
166
+ );
167
+ }
168
+
169
+ export default App;
170
+ ```
171
+
172
+ ---
173
+
174
+ ## 📘 API Reference
175
+
176
+ ### `createBucket(initial: object, option?: BucketOptions)`
177
+
178
+ Creates a new bucket for managing the global state.
179
+
180
+ #### Parameters
181
+
182
+ | Name | Type | Description |
183
+ | --------- | --------- | ----------------------------------------- |
184
+ | `initial` | `object` | Initial state values. |
185
+ | `option` | `object?` | Optional configuration (default: memory). |
186
+
187
+ #### `BucketOptions`
188
+
189
+ `BucketOptions` allows you to configure how and where the state is stored. It includes:
190
+
191
+ | Property | Type | Description |
192
+ | -------- | ------------------------------------- | ---------------------------------------------- |
193
+ | `store` | `'memory', 'session', 'local', 'url'` | Specifies the storage mechanism for the state. |
194
+
195
+ ### Returned Functions
196
+
197
+ #### State Management
198
+
199
+ | Function | Description |
200
+ | ----------------- | ----------------------------------------------------- |
201
+ | `set(key, value)` | Sets the value of a specific key in the state. |
202
+ | `get(key)` | Retrieves the value of a specific key from the state. |
203
+ | `delete(key)` | Removes a key-value pair from the state. |
204
+ | `clear()` | Clears all state values. |
205
+ | `getState()` | Returns the entire state as an object. |
206
+ | `setState(state)` | Updates the state with a partial object. |
207
+
208
+ #### Change Detection
209
+
210
+ | Function | Description |
211
+ | ---------------- | ------------------------------------------- |
212
+ | `isChange(key)` | Checks if a specific key has been modified. |
213
+ | `getChanges()` | Returns an array of keys that have changed. |
214
+ | `clearChanges()` | Resets the change detection for all keys. |
215
+
216
+ ---
217
+
218
+ ## 🤝 Contributing
219
+
220
+ Contributions are welcome! Please check out the [contribution guidelines](https://github.com/devnax/react-state-bucket).
221
+
222
+ ---
223
+
224
+ ## 📄 License
225
+
226
+ This project is licensed under the [MIT License](https://opensource.org/licenses/MIT).
227
+
228
+ ---
229
+
230
+ ## 📞 Support
231
+
232
+ For help or suggestions, feel free to open an issue on [GitHub](https://github.com/devnax/react-state-bucket/issues) or contact us via [devnaxrul@gmail.com](mailto:devnaxrul@gmail.com).
233
+
package/index.js DELETED
@@ -1,125 +0,0 @@
1
- "use client";
2
- import { useEffect, useId, useMemo, useState } from "react";
3
- const createBucket = (initial, option) => {
4
- const hooks = /* @__PURE__ */ new Map();
5
- let data = /* @__PURE__ */ new Map();
6
- let changes = /* @__PURE__ */ new Map();
7
- let _option = {
8
- store: "memory",
9
- ...option
10
- };
11
- for (let key in initial) {
12
- let value = initial[key];
13
- data.set(key, value);
14
- changes.set(key, true);
15
- }
16
- const handleStorage = (isLoaded = true) => {
17
- if (typeof window !== "undefined") {
18
- let url = new URL(window.location.href);
19
- if (_option.store === "session" || _option.store === "local") {
20
- let storage = _option.store === "session" ? sessionStorage : localStorage;
21
- for (let key in initial) {
22
- let has = storage.getItem(key) !== null;
23
- if (isLoaded || !has) {
24
- data.has(key) ? storage.setItem(key, data.get(key)) : storage.removeItem(key);
25
- } else if (has) {
26
- data.set(key, storage.getItem(key));
27
- }
28
- }
29
- } else if (_option.store === "url") {
30
- for (let key in initial) {
31
- let has = url.searchParams.has(key);
32
- if (isLoaded || !has) {
33
- data.has(key) ? url.searchParams.set(key, data.get(key)) : url.searchParams.delete(key);
34
- } else if (has) {
35
- data.set(key, url.searchParams.get(key));
36
- }
37
- }
38
- window.history.replaceState(null, "", url.toString());
39
- }
40
- }
41
- };
42
- handleStorage(false);
43
- let dispatch = () => {
44
- hooks.forEach((d) => {
45
- try {
46
- d();
47
- } catch (error) {
48
- }
49
- });
50
- handleStorage();
51
- };
52
- const set = (key, value) => {
53
- if (!(key in initial)) throw new Error(`(${key}) Invalid key provided in the set function. Please verify the structure of the initial state data.`);
54
- data.set(key, value);
55
- changes.set(key, true);
56
- dispatch();
57
- };
58
- const get = (key) => data.get(key);
59
- const _delete = (key) => {
60
- data.delete(key);
61
- changes.set(key, true);
62
- dispatch();
63
- };
64
- const clear = () => {
65
- for (let key in initial) {
66
- data.delete(key);
67
- changes.set(key, true);
68
- }
69
- dispatch();
70
- };
71
- const getState = () => {
72
- let d = {};
73
- for (let key in initial) {
74
- d[key] = data.get(key);
75
- }
76
- return d;
77
- };
78
- const setState = (state) => {
79
- for (let key in state) {
80
- if (!(key in initial)) throw new Error(`(${key}) Invalid key provided in the setState function. Please verify the structure of the initial state data.`);
81
- data.set(key, state[key]);
82
- changes.set(key, true);
83
- }
84
- dispatch();
85
- };
86
- const isChange = (key) => changes.get(key);
87
- const getChanges = () => Array.from(changes.keys()).filter((key) => changes.get(key));
88
- const clearChanges = () => Array.from(changes.keys()).forEach((key) => changes.set(key, false));
89
- const useHook = () => {
90
- const id = useId();
91
- const [d, setUp] = useState(0);
92
- useEffect(() => {
93
- hooks.set(id, () => setUp(Math.random()));
94
- return () => {
95
- hooks.delete(id);
96
- };
97
- }, []);
98
- const state = useMemo(() => getState(), [d]);
99
- return {
100
- set,
101
- get,
102
- delete: _delete,
103
- clear,
104
- getState: () => state,
105
- setState,
106
- isChange,
107
- getChanges,
108
- clearChanges
109
- };
110
- };
111
- useHook.set = set;
112
- useHook.get = get;
113
- useHook.delete = _delete;
114
- useHook.clear = clear;
115
- useHook.getState = getState;
116
- useHook.setState = setState;
117
- useHook.isChange = isChange;
118
- useHook.getChanges = getChanges;
119
- useHook.clearChanges = clearChanges;
120
- return useHook;
121
- };
122
- export {
123
- createBucket
124
- };
125
- //# sourceMappingURL=index.js.map
File without changes