{"_id":"@dmytromykhailiuk/reactive-react","_rev":"3-d62a2cc0553f71ad10bbe8294bb7aaa1","name":"@dmytromykhailiuk/reactive-react","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@dmytromykhailiuk/reactive-react","version":"1.0.0","author":{"name":"Dmytro Mykhailiuk"},"license":"ISC","_id":"@dmytromykhailiuk/reactive-react@1.0.0","maintainers":[{"name":"dmytromykhailiuk","email":"dimamykhayluk@gmail.com"}],"homepage":"https://github.com/dmytromykhailiuk/react-signal#readme","bugs":{"url":"https://github.com/dmytromykhailiuk/react-signal/issues"},"dist":{"shasum":"5a56c6f0ea93412746cddd2b8832cd7b43e7fd34","tarball":"https://registry.npmjs.org/@dmytromykhailiuk/reactive-react/-/reactive-react-1.0.0.tgz","fileCount":6,"integrity":"sha512-rWtlE9i2r+kFqEC5iUwR/ADqQZCl86zsnX3eKYOvjzsNXhE8731AX3T+c64Cg/UmG57Ab4u5afHOLrPkYy8TTw==","signatures":[{"sig":"MEUCIQCRr9wksP8KkkL8m1AapAFZq0yZlbVBctIJMdb9LiyoKwIgbaEL0BZGGSeSJeLd6M+GH/MAi7ukdVA+JArkV+Vpr5I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19548},"main":"dist/src/index.js","types":"dist/src/index.d.ts","gitHead":"04b7aef86dc9cbb124de7f9b9b1e2224f2e792c1","scripts":{"compile":"npx tsc"},"_npmUser":{"name":"dmytromykhailiuk","email":"dimamykhayluk@gmail.com"},"repository":{"url":"git+https://github.com/dmytromykhailiuk/react-signal.git","type":"git"},"_npmVersion":"10.8.2","description":"Simple and Powerful Signal implementation for React","directories":{},"_nodeVersion":"20.17.0","dependencies":{"react":"^18.3.1","@dmytromykhailiuk/reactive":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^9.1.5","eslint":"^9.9.1","prettier":"^3.3.3","typescript":"^5.5.4","@types/node":"^22.5.4","@types/react":"^18.3.8","eslint-plugin-node":"^11.1.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.1","@typescript-eslint/parser":"^8.4.0","eslint-config-airbnb-typescript":"^18.0.0","@typescript-eslint/eslint-plugin":"^8.4.0"},"_npmOperationalInternal":{"tmp":"tmp/reactive-react_1.0.0_1727036720525_0.6987188018312018","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0":{"name":"@dmytromykhailiuk/reactive-react","version":"1.1.0","author":{"name":"Dmytro Mykhailiuk"},"license":"ISC","_id":"@dmytromykhailiuk/reactive-react@1.1.0","maintainers":[{"name":"dmytromykhailiuk","email":"dimamykhayluk@gmail.com"}],"homepage":"https://github.com/dmytromykhailiuk/react-signal#readme","bugs":{"url":"https://github.com/dmytromykhailiuk/react-signal/issues"},"dist":{"shasum":"bbf9221748001e452b45d79e0bdf4200c6e57d06","tarball":"https://registry.npmjs.org/@dmytromykhailiuk/reactive-react/-/reactive-react-1.1.0.tgz","fileCount":6,"integrity":"sha512-FfdqU9LMUBE529/2vE/mtdqvszA5kX8TPiOYOFaBuQp1zek8G0RX4QN4iqWn66CnT9qizgLxwQLVog+hIjEhtQ==","signatures":[{"sig":"MEQCIG4LAZRGJk+wo6Ft9QE1w70e+woVvHpJnXjjZlzu4hs/AiB3DDX3/5X3i8BIaIitk/cszMJWTPQfhyY+0zSHP3rOxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21052},"main":"dist/src/index.js","types":"dist/src/index.d.ts","gitHead":"856825bf6c718681a31964ac16e10f488d9d83e5","scripts":{"compile":"npx tsc"},"_npmUser":{"name":"dmytromykhailiuk","email":"dimamykhayluk@gmail.com"},"repository":{"url":"git+https://github.com/dmytromykhailiuk/react-signal.git","type":"git"},"_npmVersion":"10.8.2","description":"Simple and Powerful Signal implementation for React","directories":{},"_nodeVersion":"20.17.0","dependencies":{"react":"^18.3.1","@dmytromykhailiuk/reactive":"1.1.0"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^9.1.5","eslint":"^9.9.1","prettier":"^3.3.3","typescript":"^5.5.4","@types/node":"^22.5.4","@types/react":"^18.3.8","eslint-plugin-node":"^11.1.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.1","@typescript-eslint/parser":"^8.4.0","eslint-config-airbnb-typescript":"^18.0.0","@typescript-eslint/eslint-plugin":"^8.4.0"},"_npmOperationalInternal":{"tmp":"tmp/reactive-react_1.1.0_1727523055545_0.5528981936541253","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2024-09-22T20:25:20.397Z","modified":"2026-08-12T16:11:33.655Z","1.0.0":"2024-09-22T20:25:20.727Z","1.1.0":"2024-09-28T11:30:55.724Z"},"bugs":{"url":"https://github.com/dmytromykhailiuk/react-signal/issues"},"author":{"name":"Dmytro Mykhailiuk"},"license":"ISC","homepage":"https://github.com/dmytromykhailiuk/react-signal#readme","repository":{"url":"git+https://github.com/dmytromykhailiuk/react-signal.git","type":"git"},"description":"Simple and Powerful Signal implementation for React","maintainers":[{"name":"dmytromykhailiuk","email":"dimamykhayluk@gmail.com"}],"readme":"# Reactive\n\n**Simple and Powerful Signal implementation for React**\n\n*Solutition uses [reactive package](https://www.npmjs.com/package/@dmytromykhailiuk/reactive) under the hood\n\n## Installation\n\n```sh\nnpm i @dmytromykhailiuk/reactive-react\n```\n\n## Basic example of usage\n\n```typescript\nimport { useSignal, useComputedSignal, useSignalEffect, useDebouncedSignalEffect } from '@dmytromykhailiuk/reactive-react';\n\nconst a = useSignal(1);\nconst b = useSignal(2);\nconst c = useComputedSignal(() => a.value + b.value);\n\nconsole.log('ComputedSignal', c.value); \n// ComputedSignal 3\n\na.value = a.value + 1;\nb.value = b.value + 2;\nconsole.log('ComputedSignal', c.value); \n// ComputedSignal 6\n\nconst effect = useSignalEffect(() => console.log('SignalEffect', c.value));\n// SignalEffect 6\n\na.value = a.value + 1;\n// SignalEffect 7\na.value = a.value + 1;\n// SignalEffect 8\nb.value = b.value + 2;\n// SignalEffect 10\nb.value = b.value;\n\neffect.destroy();\n\nconst debouncedEffect = new useDebouncedSignalEffect(() => console.log('DebouncedSignalEffect', c.value));\n// DebouncedSignalEffect 10\n\na.value = a.value + 1;\na.value = a.value + 1;\nb.value = b.value + 2;\n\n\n// DebouncedSignalEffect 14\n\n```\n\n**IMPORTANT: changing the signal value dosn't trigger component update**\n\n**For component update we need to use useReactive or useComponentUpdateWithSignal hooks**\n\n## Example of useReactive usage\n```typescript\nimport { useCallback } from 'react';\nimport { useSignal, useComputedSignal, useReactive } from '@dmytromykhailiuk/reactive-react';\n\nconst ExampleComponent = () => {\n  const signal = useReactive(useSignal(0)); // can pass signal or computed\n\n  return <>\n    <div>signal value - {signal.value}</div>\n    <button click={() => signal.update(value => value + 1)}>increase signal value</button>\n  </>\n}\n```\n\n\n## Example of useComponentUpdateWithSignal usage\n```typescript\nimport { useCallback } from 'react';\nimport { useSignal, useComputedSignal, useComponentUpdateWithSignal } from '@dmytromykhailiuk/reactive-react';\n\nconst ExampleComponent = () => {\n  const firstSignal = useSignal(0);\n  const secontSignal = useSignal(0);\n\n  const computedSignal = useComputedSignal(() => firstSignal.value + secontSignal.value);\n\n  useComponentUpdateWithSignal(computedSignal); // We can pass multiple signals\n\n  const inscreaseSignalValue = useCallback((signal) => {\n    signal.value = signal.value + 1;\n  }, []);\n\n  const inscreaseFirstSignalValue = useMemo(() => inscreaseSignalValue.bind(null, firstSignal), []);\n  const inscreaseSecondSignalValue = useMemo(() => inscreaseSignalValue.bind(null, secontSignal), []);\n\n  return <>\n    <div>computedSignal - {computedSignal.value} </div>\n    <button click={inscreaseFirstSignalValue}>increase first signal</button>\n    <button click={inscreaseSecondSignalValue}>increase second signal</button>\n  </>\n}\n\n```\n","readmeFilename":"README.md"}