{"_id":"@cruise-automation/hooks","_rev":"4-6f5ba15b6423b4895e4e3c12590e13a9","name":"@cruise-automation/hooks","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@cruise-automation/hooks","version":"0.0.1","description":"A set of resusable React hooks","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/cruise-automation/webviz.git"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","browser":"dist/index.esm.js","unpkg":"dist/index.umd.js","scripts":{"build":"rollup -c","build:watch":"rollup -c --watch","clean":"rimraf dist","watch":"NODE_ENV=development npm run build:watch"},"devDependencies":{"flow-bin":"0.80.0"},"peerDependencies":{"react":"16.x","react-dom":"16.x"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/cruise-automation/webviz/issues"},"homepage":"https://github.com/cruise-automation/webviz#readme","_id":"@cruise-automation/hooks@0.0.1","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"audreyli","email":"me@audreyli.me"},"dist":{"integrity":"sha512-sUwYShqRJAyg2XS7+uc9ZwdNkRArLdyjPTF6Ebl1GphXHX5QYU14aMt3SO3QtVg0fd/KSWM4FinRosxZDq5uZg==","shasum":"a8e1788f7fc843430a0ff88dd667b46e6aa7edc1","tarball":"https://registry.npmjs.org/@cruise-automation/hooks/-/hooks-0.0.1.tgz","fileCount":23,"unpackedSize":63385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpDJ5CRA9TVsSAnZWagAAgjEQAJiALLwPMaYkxGIQY8IJ\nfs7xKQa6T+S7Oy4+Pd2FOSG1n5qUu5LDbkON9VsH+axCb3Q95PsaejQtjy5u\n9Ef7KsPubG177jSG8sHD0u/iJ7kMWL1N4qQhWa8CNS7zwWIOH/2KIP8nJIzK\nQWO76Yb9Gl57nseFhUsRClLPF9beink2VKitL9Vwa9y8HyAAERGXDA/Is67p\nx3e3WGrJ8AAI4EtDobwZ26s5HYeTfZibf67rxw/US/TKYxuVC9l/GZZcYdAL\nWe4/4mjMo55DF0eJogn79iLbZ+Ey1j1PHTGYwnd97ntLtkdIWkwFt6QC1Sqa\n8B6chxmkpYOlftdGAQ9RgTod82pX6aybyqBPRNH77Yyqqb81M4xkInYD0pQk\nsl+pippEoWai8JG0FPAS8aGD2garJXEDuLzIxZKtVVoZTCpeejJmZcXO16kO\nYFTzhI5TvKggQ204kXDIf03+rs1mpvReDlDpSJwsR27Tja1g4pQGfWOD9JSt\nyJw5JTZC/ZX1LcwiX9wSF8NRCFlpSekwJCX2j+8FINVnc6lDJ03Z8Hgu+/0k\n1HGC7V63wqcpvENIRS+fvkpFSF2UpkD6mrGaPVG/pcXOw0t2QqBQe9T47DE5\nK3BFGeehGzrBV2PREVUnspRpwsqgFmjjNbVaMOQRXdG/FtJ/9OkIr2wiDD9l\ndzy7\r\n=2nIk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDljMMUr0XCEiVtSM5TNONOLRpJHGMHB+95V5iLgOLT0QIhAIA0yFzi9jIGLFK35LeX2T9+40nVmzlXE2tMD97DgwCL"}]},"maintainers":[{"name":"audreyli","email":"me@audreyli.me"},{"name":"jtbandes","email":"jacob@bandes-stor.ch"},{"name":"brianc","email":"brian.m.carlson@gmail.com"},{"name":"janpaul123","email":"me@janpaulposma.nl"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hooks_0.0.1_1554264696879_0.6611171357713481"},"_hasShrinkwrap":false}},"time":{"created":"2019-04-03T04:11:36.685Z","0.0.1":"2019-04-03T04:11:36.997Z","modified":"2022-04-05T01:57:46.861Z"},"maintainers":[{"email":"hassoncs@gmail.com","name":"hassoncs"},{"email":"me@janpaulposma.nl","name":"janpaul123"},{"email":"me@audreyli.me","name":"audreyli"}],"description":"A set of resusable React hooks","homepage":"https://github.com/cruise-automation/webviz#readme","repository":{"type":"git","url":"git+https://github.com/cruise-automation/webviz.git"},"bugs":{"url":"https://github.com/cruise-automation/webviz/issues"},"license":"Apache-2.0","readme":"# @cruise-automation/hooks\n\nA set of resusable React hooks.\n\n## Install\n\n```bash\nnpm install --save @cruise-automation/hooks\n```\n\n## Hooks\n\n### `useAbortable`\n\nA React hook to load async, disposable resources and fire the cleanup callback when the component unmountts. If the component unmounts before the async operation completes, the resource will still be cleaned up once it finishes loading and an abort signal will be issued to the async load operation.\n\n```js\n// types\n useAbortable<T>(\n  defaultValue: T,  // default value, will be set to the actual value if action is performed successfully\n  action: (AbortController) => Promise<T>, // async action to perform\n  cleanup: (?T) => void, // clean up work if thtere is any\n  args: any // dependencies\n): [T, () => void] // result value and abort function\n```\n\n```js\n// sample usage\nimport { useAbortable } from \"@cruise-automation/hooks\";\n\nfunction Example(props) {\n  const [data, setData] = useState(null);\n  const dateName = 'foo';\n  // fetch data from remote when the component is mounted\n  const [remoteData, abortFn] = useAbortable(\n    null,\n    async (abortController) =>  {\n      if (dataName) {\n        fetchDataFromRemote(props, dataName)\n      }\n    }\n    (val) => {},\n    [dataName]\n  );\n\n  // abort is usually called automatically when the component unmounts, but it can also be called manually\n  function abortManually() {\n    abortFn();\n  }\n\n  return (\n    <div>\n      <button onClick={abortManually}>Stop Loading</button>\n    </div>\n  );\n}\n```\n\n### `useCleanup`\n\nA small React hook to fire the cleanup callback when the component unmounts. Equivalent to `useEffect(() => () => { teardown(); }, [])`.\n\n```js\n// types\n useCleanup(teardown: () => void): void\n```\n\n```js\n// sample usage\nfunction Example() {\n  const [audioContext] = React.useState(() => new window.AudioContext));\n  // automatically close audioContext when the component unmounts\n  useCleanup(() => audioContext.close());\n  return null;\n}\n```\n\n### `useEventListener`\n\nA hook for conditionally adding and removing event listeners on DOM elements.\n\n```js\n// types\nuseEventListener<T>(\n  target: Element, // event target, e.g. window\n  type: string, // event type\n  enable: boolean,\n  handler: (any) => void,\n  dependencies: any[],\n): void\n```\n\n```js\n// sample usage\nfunction Example() {\n  const [isDragging, setIsDragging] = useState(false);\n  useEventListener(\n    window,\n    \"mousemove\",\n    isDragging, // add this listener only during mouse dragging\n    (event) => {\n      /* do something here... */\n    },\n    []\n  );\n  return <div onMouseDown={() => setIsDragging(true)}>demo</div>;\n}\n```\n\n### `useAnimationFrame`\n\nA React hook that accepts a callback function which will be called repeatedly, synchronized with the browser's repaints via [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame).\n\n```js\n// types\nuseAnimationFrame(\n  callback: (timestamp: number) => void,\n  disable: boolean,\n  dependencies: any[],\n): void\n```\n\n```js\n// sample usage: a count state that gets updated in every animation frame\nfunction Example() {\n  const [count, setCount] = React.useState(0);\n  useAnimationFrame(\n    (timestamp) => {\n      setCount(count + 1);\n    },\n    false,\n    []\n  );\n  return <span>{count}</span>;\n}\n```\n","readmeFilename":"README.md"}