{"_id":"@abasb75/react-state-manager","name":"@abasb75/react-state-manager","dist-tags":{"latest":"0.0.0-test1"},"versions":{"0.0.0-test1":{"name":"@abasb75/react-state-manager","version":"0.0.0-test1","description":"a react powerfull state manager","main":"index.js","type":"module","types":"index.d.ts","keywords":["state","state-manager"],"author":{"name":"Abbas Bagheri","email":"abasbagheria@gmail.com"},"license":"ISC","repository":{"type":"git","url":"git+https://github.com/abasb75/react-state-manager/raction.git"},"bugs":{"url":"https://github.com/abasb75/react-state-manager/issues"},"homepage":"https://github.com/abasb75/react-state-manager#readme","dependencies":{"@abasb75/state-manager":"^0.0.0-test0","react":"^18.3.1","react-dom":"^18.3.1"},"devDependencies":{"@types/react":"^18.3.12","@types/react-dom":"^18.3.1"},"_id":"@abasb75/react-state-manager@0.0.0-test1","gitHead":"c061ec1e0e9168ab82adae9205f787133da4290a","_nodeVersion":"22.11.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-Jx5ECXb7YP7ojPQ9qbtQSKupCw6B7YMZ1C6i8ayWgWaIXTI8uvswimfJkJf8aFBFg9XT2uNfWJTbTF8CBmhLtg==","shasum":"d2c92d68ef83beaa7db857b942a2ab24b10147e4","tarball":"https://registry.npmjs.org/@abasb75/react-state-manager/-/react-state-manager-0.0.0-test1.tgz","fileCount":7,"unpackedSize":35421,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEkN3nTcQz3Bj7ef8+0L0FheXXjOms4neOyK9tGbPjPiAiAgAveucQgvBKWyNrymuL6y+MQzf5mg8g9iIsK0asAM4A=="}]},"_npmUser":{"name":"abasb75","email":"abasbagheria@gmail.com"},"directories":{},"maintainers":[{"name":"abasb75","email":"abasbagheria@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-state-manager_0.0.0-test1_1733137033034_0.9930929673969087"},"_hasShrinkwrap":false}},"time":{"created":"2024-12-02T10:57:12.932Z","0.0.0-test1":"2024-12-02T10:57:13.202Z","modified":"2024-12-02T10:57:13.560Z"},"maintainers":[{"name":"abasb75","email":"abasbagheria@gmail.com"}],"description":"a react powerfull state manager","homepage":"https://github.com/abasb75/react-state-manager#readme","keywords":["state","state-manager"],"repository":{"type":"git","url":"git+https://github.com/abasb75/react-state-manager/raction.git"},"author":{"name":"Abbas Bagheri","email":"abasbagheria@gmail.com"},"bugs":{"url":"https://github.com/abasb75/react-state-manager/issues"},"license":"ISC","readme":"# @abasb75/react-state-manager\n`@abasb75/react-state-manager` is a great and best state manager tools for your javascript web applications.  \n1. sync data between opened browser tabs when updating state.\n2. save data on `localstorage`\n3. great type hint for `state` or defined `action`\n\n# installation\n\n```sh\nnpm i @abasb75/state-manager @abasb75/react-state-manager --save\n```\n\n# Quick Start:\n\n1. Create `initial value`  for passing to store's object:\n\n```javascript\n\ninterface StateType {\n    darkMode:boolean;\n    counter:number;\n    notes:{\n        text:string;\n        date:number;\n    }[];\n}\n\nconst initialState:StateType = {\n    darkMode:false,\n    counter:0,\n    notes:[],\n}\n\n```\n\n\n2. Define your `actions`:\n\n```javascript\n\nconst actions = {\n    toggleDarkMode:(state:StateType)=>{\n        return {\n            ...state,\n            darkMode:!state.darkMode,\n        };\n    },\n    counter:{\n        increment:(state:StateType)=>{\n            return {\n                ...state,\n                counter:state.counter+1,\n            }\n        },\n        decrement:(state:StateType)=>{\n            return {\n                ...state,\n                counter:state.counter-1,\n            }\n        },\n    },\n    notes:{\n        add:(state:StateType,text:string):StateType=>{\n            console.log('add worked!')\n            return {\n                ...state,\n                notes:[\n                    ...state.notes,\n                    {\n                        text:text,\n                        date:Date.now(),\n                    }\n                ]\n            }\n        },\n        delete:(state:StateType,id:number):StateType=>{\n            return {\n                ...state,\n                notes:state.notes.filter(n=>n.date!==id),\n            }\n        },\n    }\n}\n\n```\n\n3. Create your store:\n\n```javascript\n\nimport { createStore } from \"@abasb75/state-manager\";\n\n...\n\nconst initialState:StateType = {\n    ...\n}\n\n\nconst actions = {\n    ...\n}\n\nconst store = createStore({\n    initialState,\n    actions,\n    storgable:true, // if storagble sets true, states saved on localstorage\n    storageKey:'mystorage',\n});\n\nexport default store;\n\n```\n\n4. create hook via store;\n\n```javascript\nimport prepareReactHooks from \"@abasb75/react-state-manager\";\n\n....\n\nconst {\n    useStateSelector,\n    useAction,\n} = prepareReactHooks(store);\n\nexport {\n    useStateSelector,\n    useAction,\n};\n\n```\n\n5. get state data with `useStateSelector` hook:\n\n```javascript\n\nimport { useStateSelector } from \"./state\";\n\n...\n\nconst darkMode = useStateSelector(state=>state.darkMode); //return darkMode value \n\n```\n\n6. update state properties value with `useStateDispatcher` hook:\n\n```javascript\n\nimport { useStateSelector } from \"./state\";\n\n....\n\nconst dispatch = useStateDispatcher();\n\ndispatch({\n  counter:0;\n}).then(state=>{\n  console.log(state.counter);\n});\n\n```\n\n7. update state value with defiened `actions`:\n\n```javascript\n\nimport { useAction } from \"./state\";\n\n...\n\nconst toggleDarkMode = useAction(actions=>actions.toggleDarkMode);\n\n...\n\nonClick={()=>toggleDarkMode()}\n\n```\n\n# Examples:\n<a href=\"https://github.com/abasb75/react-state-manager/tree/main/react-test\">Simple Note App</a>","readmeFilename":"README.md"}