{"_id":"@anikghosh256/reactive-state","name":"@anikghosh256/reactive-state","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@anikghosh256/reactive-state","version":"1.0.0","description":"A lightweight reactive state management library with deep reactivity using Proxy","main":"index.js","scripts":{"test":"jest"},"repository":{"type":"git","url":"git+https://github.com/anikghosh256/reactive-state.git"},"keywords":["reactive-state"],"type":"module","author":{"name":"Anik Ghosh"},"license":"MIT","bugs":{"url":"https://github.com/anikghosh256/reactive-state/issues"},"homepage":"https://github.com/anikghosh256/reactive-state#readme","devDependencies":{"jest":"^29.7.0"},"_id":"@anikghosh256/reactive-state@1.0.0","gitHead":"d22df49267734a3a80b5b2204a122fdfbcdd6afb","_nodeVersion":"20.13.1","_npmVersion":"10.8.1","dist":{"integrity":"sha512-S2O0tx6mtMKBt/Ma5Qvzkp2Ga3PENvbpzlUbFRpgsvC3FZ7kxLdcGuLjzs9RI8va8072BWmGFmsVHXg3sEya1Q==","shasum":"568935f5af434084c396adabf9c68c706490dbc5","tarball":"https://registry.npmjs.org/@anikghosh256/reactive-state/-/reactive-state-1.0.0.tgz","fileCount":6,"unpackedSize":12109,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHihWKtMO1J/c2XF5iX3FcvAo6tlfRkDlsT03nuzocIAAiAnJpjx5C1n6esIN1BuzZ6oZqRK13pcRZm2BS3KEJjdoA=="}]},"_npmUser":{"name":"anikghosh256","email":"anikghosh46.bd@gmail.com"},"directories":{},"maintainers":[{"name":"anikghosh256","email":"anikghosh46.bd@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/reactive-state_1.0.0_1739259597174_0.7899108029882025"},"_hasShrinkwrap":false}},"time":{"created":"2025-02-11T07:39:57.034Z","1.0.0":"2025-02-11T07:39:57.402Z","modified":"2025-02-11T07:39:57.679Z"},"maintainers":[{"name":"anikghosh256","email":"anikghosh46.bd@gmail.com"}],"description":"A lightweight reactive state management library with deep reactivity using Proxy","homepage":"https://github.com/anikghosh256/reactive-state#readme","keywords":["reactive-state"],"repository":{"type":"git","url":"git+https://github.com/anikghosh256/reactive-state.git"},"author":{"name":"Anik Ghosh"},"bugs":{"url":"https://github.com/anikghosh256/reactive-state/issues"},"license":"MIT","readme":"# @anikghosh256/reactive-state\r\n\r\nA lightweight, reactive state management library with deep reactivity using `Proxy`. It is ideal for managing application state with automatic updates to subscribed listeners, making it easy to build reactive applications.\r\n\r\n## Features\r\n\r\n- **Deep Reactivity**: Automatically creates deeply reactive objects using `Proxy`, so nested objects or arrays also trigger reactivity.\r\n- **Automatic Updates**: Subscribed listeners are automatically notified when the state changes.\r\n- **Simple API**: Easy-to-use methods for managing state and triggering re-renders.\r\n\r\n## Installation\r\n\r\nTo install `@anikghosh256/reactive-state`, use npm or yarn:\r\n\r\n```bash\r\nnpm install @anikghosh256/reactive-state\r\n```\r\n\r\n## Usage\r\n\r\n### Creating a Reactive State\r\n\r\nUse the createReactiveState function to create a reactive state. Pass an initial state object, and it returns an object with the reactive state and methods for managing it.\r\n\r\n```js\r\nconst { createReactiveState } = require(\"@anikghosh256/reactive-state\");\r\n\r\n// Initial state\r\nconst initialState = {\r\n  user: {\r\n    name: \"John\",\r\n    age: 30,\r\n  },\r\n  counter: 0,\r\n};\r\n\r\n// Create reactive state\r\nconst stateManager = createReactiveState(initialState);\r\n\r\n// Accessing the reactive state\r\nconsole.log(stateManager.state.user.name); // John\r\nconsole.log(stateManager.state.counter); // 0\r\n```\r\n\r\n### Subscribing to State Changes\r\n\r\nTo listen for changes to the state, use the onChange method. This method takes a listener function that is called whenever the state is updated.\r\n\r\n```js\r\n// Subscribe to state changes\r\nconst unsubscribe = stateManager.onChange(() => {\r\n  console.log(\"State updated:\", stateManager.state);\r\n});\r\n\r\n// Trigger a state change\r\nstateManager.setState({ counter: 1 }); // This will trigger the listener\r\n\r\n// Unsubscribe from state changes\r\nunsubscribe();\r\n```\r\n\r\n### Updating the State\r\n\r\nUse the setState method to update parts of the state. This method takes an object with the updated state values. If any values have changed, all subscribed listeners are notified.\r\n\r\n```js\r\n// Update state and trigger listeners\r\nstateManager.setState({ user: { name: \"Alice\" } }); // This will trigger the listener\r\n\r\n// Optional: Prevent automatic notification of listeners by passing false as the second argument\r\nstateManager.setState({ counter: 2 }, false); // This will not trigger the listener\r\n```\r\n\r\n### Unsubscribing from State Changes\r\n\r\nTo stop listening for state updates, call the unsubscribe function that `onChange` returns. This prevents the listener from being triggered when the state changes.\r\n\r\n```js\r\n// Subscribe to state updates\r\nconst unsubscribe = stateManager.onChange(() => {\r\n  console.log(\"State updated:\", stateManager.state);\r\n});\r\n\r\n// Unsubscribe from state updates\r\nunsubscribe();\r\n\r\n// State changes will no longer trigger the listener\r\nstateManager.setState({ counter: 3 });\r\n```\r\n\r\n## Full Example\r\n\r\nHere’s a full example demonstrating how to create reactive state, subscribe to changes, update the state, and unsubscribe from changes:\r\n\r\n```js\r\nconst { createReactiveState } = require(\"@anikghosh256/reactive-state\");\r\n\r\nconst initialState = {\r\n  user: {\r\n    name: \"John\",\r\n    age: 30,\r\n  },\r\n  counter: 0,\r\n};\r\n\r\n// Create reactive state\r\nconst stateManager = createReactiveState(initialState);\r\n\r\n// Subscribe to state changes\r\nconst unsubscribe = stateManager.onChange(() => {\r\n  console.log(\"State updated:\", stateManager.state);\r\n});\r\n\r\n// Trigger a state update\r\nstateManager.setState({ user: { name: \"Alice\" } }); // State updated: { user: { name: 'Alice', age: 30 }, counter: 0 }\r\n\r\n// Update counter\r\nstateManager.setState({ counter: 1 }); // State updated: { user: { name: 'Alice', age: 30 }, counter: 1 }\r\n\r\n// Prevent re-render by passing false\r\nstateManager.setState({ counter: 2 }, false); // State updated: { user: { name: 'Alice', age: 30 }, counter: 2 }\r\n\r\n// Unsubscribe from state changes\r\nunsubscribe();\r\n\r\n// This change will NOT trigger the listener\r\nstateManager.setState({ counter: 3 }); // (No output)\r\n```\r\n\r\n## API Reference\r\n\r\n### `createReactiveState(initialState)`\r\n\r\n- Parameters:\r\n  - initialState (Object) - The initial state object to create the reactive state.\r\n- Returns:\r\n  - An object with the following methods:\r\n    - state (Object) - The deeply reactive state object.\r\n    - onChange(listener) (Function) - Subscribes to state changes. Returns an unsubscribe function.\r\n    - setState(updates, reRender) (Function) - Updates the state. If reRender is true (default), listeners are notified. Set reRender to false to prevent notification.\r\n\r\n### `onChange(listener)`\r\n\r\n- Parameters:\r\n  - listener (Function) - A callback function that is called when the state changes.\r\n- Returns:\r\n  - A function to unsubscribe from state updates.\r\n\r\n### `setState(updates, reRender)`\r\n\r\n- Parameters:\r\n  - updates (Object) - The new values to update in the state.\r\n  - reRender (Boolean) - Optional. Defaults to true. If set to false, listeners won't be notified of the change.\r\n- Returns:\r\n  - void.\r\n\r\n### `unsubscribe()`\r\n\r\n- A function returned by onChange that stops further notifications for state updates.\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT License - see the [LICENSE](/LICENSE) file for details.\r\n","readmeFilename":"README.md"}