{"_id":"@catalyst-workshop/use-nodecg-haunted","_rev":"1-df06e2d875cf54c0f1877aa175d4d5e3","name":"@catalyst-workshop/use-nodecg-haunted","dist-tags":{"latest":"0.4.1-1"},"versions":{"0.4.1-1":{"name":"@catalyst-workshop/use-nodecg-haunted","version":"0.4.1-1","description":"Custom Hooks for NodeCG, Ported from React to Haunted","keywords":["custom-hooks","nodecg","react","react-hooks","typescript"],"homepage":"https://github.com/CatalystWorkshop/use-nodecg-haunted","repository":{"type":"git","url":"git+https://github.com/CatalystWorkshop/use-nodecg-haunted.git"},"license":"MIT","author":{"name":"Keiichiro Amemiya","email":"hoishinxii@gmail.com"},"contributors":[{"name":"Carlos Fernandez"},{"name":"Ted Kulp"},{"name":"Catalyst Workshop"}],"main":"cjs/index.js","module":"esm/index.js","scripts":{"_prettier":"prettier \"**/*.{js,ts,tsx,md,yml,yaml,json}\"","build":"del-cli cjs esm && run-p build:*","build:cjs":"tsc -p tsconfig.cjs.json","build:esm":"tsc -p tsconfig.esm.json","fmt":"yarn _prettier --write","prepublishOnly":"npm run build","release":"standard-version","test":"run-s test:*","test:fmt":"yarn _prettier --check","test:jest":"jest","test:lint":"eslint \"**/*.{ts,tsx}\""},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,ts,tsx,md,yml,yaml,json}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","git add"],"package.json":["sort-package-json","git add"]},"prettier":"@hoishin/prettierrc","dependencies":{"lodash.clone":"^4.5.0","tslib":"^1.10.0"},"devDependencies":{"@hoishin/prettierrc":"^2.1.1","@hoishin/tsconfig":"^2.0.0","@types/jest":"^25.0.0","@types/lodash.clone":"^4.5.6","@types/node":"12","@types/react":"^16.9.11","@types/react-dom":"^16.9.3","del-cli":"^3.0.0","eslint":"^6.6.0","eslint-config-hoishin":"^0.2.5","haunted":"^4.7.0","husky":"^4.0.0","jest":"^25.0.0","lint-staged":"^10.0.0","lit-element":"^2.3.1","nodecg":"^1.5.0","npm-run-all":"^4.1.5","prettier":"^2.0.0","react":"^16.11.0","react-dom":"^16.11.0","react-testing-library":"^7.0.1","sort-package-json":"^1.22.1","standard-version":"^7.0.0","ts-jest":"^25.0.0","typescript":"^3.6.4"},"gitHead":"84f14ba876648f5b23d47db2331f53d60661b51c","bugs":{"url":"https://github.com/CatalystWorkshop/use-nodecg-haunted/issues"},"_id":"@catalyst-workshop/use-nodecg-haunted@0.4.1-1","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-aU/yUjwwWPqmmJ/bHvwtJFGrh2rMzNgVrZzUhNXLgvlwaIm1Ak51baI0G/w6uFiUnw5U3Bp1AtbZVNAeIRRnnA==","shasum":"017203f72d1684491950827f22feae6e93f144b6","tarball":"https://registry.npmjs.org/@catalyst-workshop/use-nodecg-haunted/-/use-nodecg-haunted-0.4.1-1.tgz","fileCount":20,"unpackedSize":19839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepLTpCRA9TVsSAnZWagAAyPkP/iR44pAz/qwgra6F7Q6U\ndh8qTAPWrjoel1ox4q4DmgrfMFbByi2wcjzyZ/khGc8H83LUm9GhJPypbc8S\nhncaABMs/J7U9nnrWLWpJ9xmqOpmhCLHjRPtO9fsB5JeRxzT36MtLrJ4PAs2\nHHsMfj/l5XZ27Z2PLexGzpJHpnwM+of1jvupvZCw+eccQjeMRcWOXE4MMgzw\nJoq/qh4sZUG4XjATNB9o4hCQffdhFtveOWsfSuJ3Hy/noSgX8UHhJafzfjcU\n6Z/RuZLAvu5T/kg9kH8BXD87Ihv6kIIb8ylgzWRj7je6s0mQth0SI9X2szCj\n39JNFuITGQjhwqDxP2j23mB892HnegusXtg0I65uA/eUAuy8HFozFeoWJDi/\nCfuCGGsN4dKh0/jQZX6tG61RTHXYSfg3wqGGHozfPJuOtKQZhwcikbY7V8zX\nNN3urEpagyq0jL3q16QFjuwsOBwPfeCwBNeJj4ao+AzcVVvDJ7r4iC01iZrR\nghCJrcWQhrJ7MQ3QU2+UQ9RUsfcSqhWZ7IQh1PqB3Fq/bpR6yVdMI3TQFdKn\nDsG3LfHz63h8SSYr7c9VgVnUT9nQUeqNJ1Qrcd/0JJgzy94hIi0QdTpsqc3V\ntQNdAhQ0yp8+YAzo63ghhJQ03E4NpsGAYDXrtIi0AnioWuFUubXzjC7ZVcAq\nbivP\r\n=FCC1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZAWcyWsz0iCbcYHdAgjXvxr+HDQArOAhqq9/kEBmK7AIgJ9RfxTYRqvxHWfXHh5H7uEP3+yt3nku/3TotBCOtUrM="}]},"maintainers":[{"name":"sk115","email":"carterfritsch@gmail.com"}],"_npmUser":{"name":"sk115","email":"carterfritsch@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-nodecg-haunted_0.4.1-1_1587852520655_0.6108493712158687"},"_hasShrinkwrap":false}},"time":{"created":"2020-04-25T22:08:40.430Z","0.4.1-1":"2020-04-25T22:08:40.820Z","modified":"2022-04-04T22:04:45.663Z"},"maintainers":[{"name":"sk115","email":"carterfritsch@gmail.com"}],"description":"Custom Hooks for NodeCG, Ported from React to Haunted","homepage":"https://github.com/CatalystWorkshop/use-nodecg-haunted","keywords":["custom-hooks","nodecg","react","react-hooks","typescript"],"repository":{"type":"git","url":"git+https://github.com/CatalystWorkshop/use-nodecg-haunted.git"},"contributors":[{"name":"Carlos Fernandez"},{"name":"Ted Kulp"},{"name":"Catalyst Workshop"}],"author":{"name":"Keiichiro Amemiya","email":"hoishinxii@gmail.com"},"bugs":{"url":"https://github.com/CatalystWorkshop/use-nodecg-haunted/issues"},"license":"MIT","readme":"# use-nodecg\n\n[![Build Status](https://dev.azure.com/hoishinxii/hoishinxii/_apis/build/status/Hoishin.use-nodecg?branchName=master)](https://dev.azure.com/hoishinxii/hoishinxii/_build/latest?definitionId=1&branchName=master)\n[![codecov](https://codecov.io/gh/Hoishin/use-nodecg/branch/master/graph/badge.svg)](https://codecov.io/gh/Hoishin/use-nodecg)\n[![NpmLicense](https://img.shields.io/npm/l/use-nodecg.svg)](https://github.com/Hoishin/use-nodecg/blob/master/LICENSE)\n[![npm version](https://img.shields.io/npm/v/use-nodecg.svg)](https://www.npmjs.com/package/use-nodecg)\n[![npm version (next)](https://img.shields.io/npm/v/use-nodecg/next.svg)](https://www.npmjs.com/package/use-nodecg)\n[![npm download total](https://img.shields.io/npm/dt/use-nodecg.svg)](https://www.npmjs.com/package/use-nodecg)\n[![npm type definitions](https://img.shields.io/npm/types/use-nodecg.svg)](https://www.typescriptlang.org/)\n[![node version](https://img.shields.io/node/v/use-nodecg.svg)](https://nodejs.org/en/)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n\nThis package is a collection custom hooks of [React Hooks](https://reactjs.org/docs/hooks-intro.html) for NodeCG API.\n\n🚨 This package is in alpha state, as well as the React Hooks API itself. Do not use in production. But feel free to try out and file an issue for suggestion/bugs!\n\n## Install\n\n```sh\nnpm install use-nodecg@next\n# or\nyarn add use-nodecg@next\n```\n\n## About React Hooks\n\nThe React Hooks are a new way of **sharing code** between components, introduced in version 16.8.\n\n**_Please read the documentation of React Hooks thoroughly before using them._**\n\n-   [Video introduction](https://youtu.be/dpw9EHDh2bM)\n-   [The Motivation](https://reactjs.org/docs/hooks-intro.html#motivation)\n-   [Rules](https://reactjs.org/docs/hooks-rules.html)\n-   [Hooks API reference](https://reactjs.org/docs/hooks-reference.html)\n-   [FAQ](https://reactjs.org/docs/hooks-faq.html)\n\nIt also helps to learn the background mechanism of React Hooks.\n[React hooks: not magic, just arrays](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e)\n\n## Recommendation\n\nUse [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks) in your project. It is 100% smarter than you to detect violation of the Rules of Hooks.\n\n## Usage\n\n### `useReplicant`\n\n-   Subscribes to specified replicant and returns the value as state.\n-   Allows you to use replicant values in function component.\n\n```tsx\nimport {useReplicant} from 'use-nodecg';\n\n// This component will re-render when the `counter replicant value changes\nexport function RunnerName() {\n\tconst [count, setCount] = useReplicant('counter');\n\treturn (\n\t\t<div>\n\t\t\t<div>{count}</div>\n\t\t\t<button onClick={() => setCount(count + 1)} />\n\t\t</div>\n\t);\n}\n```\n\n### `useReplicantOnce`\n\n-   Reads specified replicant value once, without subscribing to it.\n-   Uses `readReplicant` internally.\n-   Returns single value that will be updated once when it reads the value\n-   Does NOT subscribe to replicant value changes\n\n```tsx\nimport {useReplicantOnce} from 'use-nodecg';\n\n// Only reads the replicant value once and doesn't update\nexport function RunnerName() {\n\tconst count = useReplicant('counter');\n\treturn <div>{count}</div>;\n}\n```\n\n### `useListenFor`\n\n-   Subscribes messages with `listenFor`, and unlistens on unmount.\n-   Combining with other hooks enables powerful stateful features with function component\n\n```tsx\nimport {useListenFor} from 'use-nodecg';\n\n// Shows modal for 1 second when NodeCG receives 'errorHappened' message from the server\nexport function AlertOnMessage() {\n\tconst [showAlert, setShowAlert] = useState(false);\n\tuseListenFor('errorHappened', () => {\n\t\tsetShowAlert(true);\n\t});\n\tuseEffect(() => {\n\t\tif (!showAlert) {\n\t\t\treturn;\n\t\t}\n\t\t// Disappear alert 1 second after\n\t\tconst timer = setTimeout(() => {\n\t\t\tsetShowAlert(false);\n\t\t}, 1000);\n\t\t// Make sure to return cleanup function\n\t\treturn () => {\n\t\t\tclearTimeout(timer);\n\t\t};\n\t}, [showAlert]);\n\n\treturn <Modal show={showAlert} />;\n}\n```\n\n## License\n\nMIT &copy; Keiichiro Amemiya (Hoishin)\n","readmeFilename":"README.md"}