{"id":24511710,"url":"https://github.com/devnax/react-state-bucket","last_synced_at":"2025-04-14T08:22:23.801Z","repository":{"id":269385817,"uuid":"907260405","full_name":"devnax/react-state-bucket","owner":"devnax","description":"Effortlessly manage React application states with react-state-bucket, a lightweight yet powerful state management library.","archived":false,"fork":false,"pushed_at":"2025-03-03T09:50:27.000Z","size":181,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-11T22:16:23.891Z","etag":null,"topics":["react-global-state","react-state","react-state-management","reactjs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-state-bucket","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devnax.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-23T07:30:00.000Z","updated_at":"2025-03-03T09:50:30.000Z","dependencies_parsed_at":"2024-12-23T07:36:04.977Z","dependency_job_id":"e47d39d6-ee12-4750-8c2c-ad42a2ae877f","html_url":"https://github.com/devnax/react-state-bucket","commit_stats":null,"previous_names":["devnax/react-state-bucket"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnax%2Freact-state-bucket","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnax%2Freact-state-bucket/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnax%2Freact-state-bucket/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnax%2Freact-state-bucket/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devnax","download_url":"https://codeload.github.com/devnax/react-state-bucket/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248844176,"owners_count":21170524,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-global-state","react-state","react-state-management","reactjs"],"created_at":"2025-01-22T00:40:42.849Z","updated_at":"2025-04-14T08:22:23.774Z","avatar_url":"https://github.com/devnax.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"120\" src=\"https://raw.githubusercontent.com/devnax/react-state-bucket/main/logo.png\" alt=\"React State Bucket logo\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eReact State Bucket\u003c/h1\u003e\n\nEffortlessly manage React application states with **react-state-bucket**, a lightweight yet powerful state management library.\n\n---\n\n## 🚀 Features\n\n- **Global State Management**: Manage state across your entire React application with ease.\n- **CRUD Operations**: Create, Read, Update, and Delete state values effortlessly.\n- **Multiple Storage Options**: Store state in \"memory,\" \"session storage,\" \"local storage,\" or \"URL parameters.\"\n- **Reactivity**: Automatically update components when the state changes.\n- **Custom Hooks**: Seamlessly integrate with React’s functional components.\n- **TypeScript Support**: Fully typed for a better development experience.\n- **Lightweight**: Small bundle size with no unnecessary dependencies.\n\n---\n\n## 📦 Installation\n\nInstall the package via npm or yarn:\n\n```bash\n# Using npm\nnpm install react-state-bucket\n\n# Using yarn\nyarn add react-state-bucket\n```\n\n---\n\n## 🔧 Setup and Usage\n\n### Step 1: Create a State Bucket\n\nDefine your initial state and actions:\n\n```javascript\nimport { createBucket } from 'react-state-bucket';\n\nconst initialState = {\n  count: 0,\n  user: 'Guest',\n};\n\nexport const useGlobalState = createBucket(initialState);\n```\n\n### Step 2: Use the State Bucket in a Component\n\nAccess state and actions in your React components:\n\n```javascript\nimport React from 'react';\nimport { useGlobalState } from './state';\n\nconst App = () =\u003e {\n  const globalState = useGlobalState();\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eGlobal State Management\u003c/h1\u003e\n      \u003cp\u003eCount: {globalState.get('count')}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e globalState.set('count', globalState.get('count') + 1)}\u003eIncrement\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e globalState.delete('count')}\u003eReset Count\u003c/button\u003e\n      \u003cpre\u003e{JSON.stringify(globalState.getState(), null, 2)}\u003c/pre\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n---\n\n## 🌟 Advanced Features\n\n### Using Multiple Buckets\n\n```javascript\nconst useUserBucket = createBucket({ name: '', age: 0 });\nconst useSettingsBucket = createBucket({ theme: 'light', notifications: true });\n\nfunction Profile() {\n  const userBucket = useUserBucket();\n  const settingsBucket = useSettingsBucket();\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eUser Profile\u003c/h1\u003e\n      \u003cbutton onClick={() =\u003e userBucket.set('name', 'John Doe')}\u003eSet Name\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e settingsBucket.set('theme', 'dark')}\u003eChange Theme\u003c/button\u003e\n      \u003cpre\u003eUser State: {JSON.stringify(userBucket.getState(), null, 2)}\u003c/pre\u003e\n      \u003cp\u003eCurrent Theme: {settingsBucket.get('theme')}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Persistent Storage Options\n\n```javascript\nconst usePersistentBucket = createBucket(\n  { token: '', language: 'en' },\n  { store: 'local' }\n);\n\nfunction PersistentExample() {\n  const persistentBucket = usePersistentBucket();\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003ePersistent Bucket\u003c/h1\u003e\n      \u003cbutton onClick={() =\u003e persistentBucket.set('token', 'abc123')}\u003eSet Token\u003c/button\u003e\n      \u003cp\u003eToken: {persistentBucket.get('token')}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Reusing State Across Components\n\n```javascript\nimport React from 'react';\nimport { createBucket } from 'react-state-bucket';\n\nconst useGlobalState = createBucket({ count: 0, user: 'Guest' });\n\nfunction Counter() {\n  const globalState = useGlobalState();\n\n  return (\n    \u003cdiv\u003e\n      \u003ch2\u003eCounter Component\u003c/h2\u003e\n      \u003cp\u003eCount: {globalState.get('count')}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e globalState.set('count', globalState.get('count') + 1)}\u003eIncrement Count\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n\nfunction UserDisplay() {\n  const globalState = useGlobalState();\n\n  return (\n    \u003cdiv\u003e\n      \u003ch2\u003eUser Component\u003c/h2\u003e\n      \u003cp\u003eCurrent User: {globalState.get('user')}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e globalState.set('user', 'John Doe')}\u003eSet User to John Doe\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eGlobal State Example\u003c/h1\u003e\n      \u003cCounter /\u003e\n      \u003cUserDisplay /\u003e\n      \u003cpre\u003eGlobal State: {JSON.stringify(useGlobalState().getState(), null, 2)}\u003c/pre\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n---\n\n## 📘 API Reference\n\n### `createBucket(initial: object, option?: BucketOptions)`\n\nCreates a new bucket for managing the global state.\n\n#### Parameters\n\n| Name      | Type      | Description                               |\n| --------- | --------- | ----------------------------------------- |\n| `initial` | `object`  | Initial state values.                     |\n| `option`  | `object?` | Optional configuration (default: memory). |\n\n#### `BucketOptions`\n\n`BucketOptions` allows you to configure how and where the state is stored. It includes:\n\n| Property | Type                                  | Description                                    |\n| -------- | ------------------------------------- | ---------------------------------------------- |\n| `store`  | `'memory', 'session', 'local', 'url'` | Specifies the storage mechanism for the state. |\n\n### Returned Functions\n\n#### State Management\n\n| Function          | Description                                           |\n| ----------------- | ----------------------------------------------------- |\n| `set(key, value)` | Sets the value of a specific key in the state.        |\n| `get(key)`        | Retrieves the value of a specific key from the state. |\n| `delete(key)`     | Removes a key-value pair from the state.              |\n| `clear()`         | Clears all state values.                              |\n| `getState()`      | Returns the entire state as an object.                |\n| `setState(state)` | Updates the state with a partial object.              |\n\n#### Change Detection\n\n| Function         | Description                                 |\n| ---------------- | ------------------------------------------- |\n| `isChange(key)`  | Checks if a specific key has been modified. |\n| `getChanges()`   | Returns an array of keys that have changed. |\n| `clearChanges()` | Resets the change detection for all keys.   |\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! Please check out the [contribution guidelines](https://github.com/devnax/react-state-bucket).\n\n---\n\n## 📄 License\n\nThis project is licensed under the [MIT License](https://opensource.org/licenses/MIT).\n\n---\n\n## 📞 Support\n\nFor 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).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevnax%2Freact-state-bucket","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevnax%2Freact-state-bucket","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevnax%2Freact-state-bucket/lists"}