{"_id":"@ehynds/use-fetch","_rev":"4-8186bd8efdeddc507dd7a921e0619c20","name":"@ehynds/use-fetch","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@ehynds/use-fetch","version":"1.0.0","description":"A small, low-level React hook that wraps the Fetch API","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"test":"npm run lint && jest","lint":"eslint .","ts":"tsc --skipLibCheck --project tsconfig.json","ts:watch":"npm run ts -- --watch","build":"rm -rf dist/ && npm run ts"},"author":{"name":"Eric Hynds","url":"https://github.com/ehynds"},"homepage":"https://github.com/ehynds/use-fetch","license":"MIT","dependencies":{},"devDependencies":{"@babel/preset-env":"^7.13.5","@babel/preset-typescript":"^7.13.0","@testing-library/react-hooks":"^5.0.3","@types/jest":"^26.0.20","@types/react":"^17.0.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/parser":"^4.15.2","eslint":"^7.20.0","jest":"^26.6.3","react":"^17.0.1","react-test-renderer":"^17.0.1","typescript":"^4.1.5"},"peerDependencies":{"react":">= 16.8.0"},"gitHead":"66869fb5c08f64856f2bea67af3f48bad4ded538","_id":"@ehynds/use-fetch@1.0.0","_nodeVersion":"12.20.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-pamYzdni9eA4lEvSo6RN2v0BEsBRYpAZyGLnxX9O3IwI4nsfUxB9nTtKwj1jwcHMXxZuc//4BH92FtZupliEaw==","shasum":"998fb4672f7b5a0b09723279895fe992dff70a98","tarball":"https://registry.npmjs.org/@ehynds/use-fetch/-/use-fetch-1.0.0.tgz","fileCount":18,"unpackedSize":24292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNumTCRA9TVsSAnZWagAABZwP/A5QmWFRejtRksmhl+1N\ngMUJT3GoDjbAgniI2Sm+KKZklnAjVt7Frh173bD5rJS8klbdRKPWZk+NPk+k\nn3r0GaBmnwb4LJrTuf/xEcorfvKNzjQASIG1sIKvHYjOSiMzlqYBuYFNCuAv\n1+5V4+tf1r/2P0IQE+JVSjO2qRQeacQAVZy6M0tHW/rOwTw+Eo19GwCnvB4Q\nkcWNXI5KfCg6AeWJqkU+/69go3DadECGXOsBjDhbc1qDSKRS8FDgjtz73mxg\nHtMgycZgkezJd+d06Xpn0RMNNjJCnGHCJkRx+9TAiXhT49Sj4DEZBCDD09nq\nVTofDONNPRBVZO2Sg+JL2pPhcZruRghVA20GTGW5jh38aiOkHs8MLRrHkuyR\n13xk/N1ok8u28GDJ5Q+AuSfd11JB8cjZcerfLpjJixrdUDggfM/nUjICZHLy\nONPNt0IAYchCj+QIXGzCuDh/yADP5+TNgan0UXrAn7Uttb2IlPQm9mIpbUlw\nOXGyIFuoq77dSjMGWB3xSSyhRHMWm1XG1BSt+yERPhKxjrRk9Qw8Xm86pw1U\nnN+z/nbuJq8FkQCc8RMdEov2Q3Hjh3f8fntNOZGhiZFk1ImA+3/npo/I8XvA\nhjHyZ61KIwVpDh5Mk49rWK9qJFr5TL3HOfOI04oFysR3xda1YZO/531vrUVP\nWDfp\r\n=mC7Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0A0RV1fxA4pxH3Hw4u3sWXmR2fTh3Fv3nZqvnGYkHwAIgLmcyDyrSZfXZkWAe6C1y1faRP3o+KYCsjOD5O1w81Ug="}]},"_npmUser":{"name":"ehynds","email":"ehynds@gmail.com"},"directories":{},"maintainers":[{"name":"ehynds","email":"ehynds@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-fetch_1.0.0_1614211475460_0.7732008252318325"},"_hasShrinkwrap":false},"1.0.1":{"name":"@ehynds/use-fetch","version":"1.0.1","description":"A small, low-level React hook that wraps the Fetch API","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"test":"npm run lint && jest","lint":"eslint .","ts":"tsc --skipLibCheck --project tsconfig.json","ts:watch":"npm run ts -- --watch","build":"rm -rf dist/ && npm run ts","prepublish":"npm run build"},"author":{"name":"Eric Hynds","url":"https://github.com/ehynds"},"homepage":"https://github.com/ehynds/use-fetch","license":"MIT","dependencies":{},"devDependencies":{"@babel/preset-env":"^7.13.5","@babel/preset-typescript":"^7.13.0","@testing-library/react-hooks":"^5.0.3","@types/jest":"^26.0.20","@types/react":"^17.0.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/parser":"^4.15.2","eslint":"^7.20.0","jest":"^26.6.3","react":"^17.0.1","react-test-renderer":"^17.0.1","typescript":"^4.1.5"},"peerDependencies":{"react":">= 16.8.0"},"gitHead":"734a52f1ec34016566a1467f1ec04d30827e6c2c","_id":"@ehynds/use-fetch@1.0.1","_nodeVersion":"12.20.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-SrmJABU+Cs/Hx6kpYOY2FbYfmK2Q1p4GEdvrHuRTq3S3kRCxQm2g8l5d1LzPAHQcdnIu69l2Z7UsAZtZF1UyVA==","shasum":"2d863e3a7bc3f0d2932db669d535dcf416163c6d","tarball":"https://registry.npmjs.org/@ehynds/use-fetch/-/use-fetch-1.0.1.tgz","fileCount":18,"unpackedSize":24327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNuqUCRA9TVsSAnZWagAAEpoQAIVxdOGbQb36R31YeSOd\nJ5N3ndQLXcFOoNEHu31hbrm/NaK9rngcKBovMqILch3W9DdrEEXjC9wM900u\n26/hYmbf3eaVBbz522AUu/TbPefPfcM5kxs6JlIOgGEFSNDrrKeRu4WfDjOD\ne8oNDG6ajIbnbMo35o0z1mLUA8Fk8aNK50sGLbxcBUOcMtegFT/EzffHc+bh\nsSLa6VsjpFR5sxlsnhBPLAOVrTX/7ta/kHL8M7iZ+pCXciQE/WYkPj4JKChn\n6dGpxdaoJ6lzAcUfGyJSwERgYDK+C+oceqLnW4/zpRpJ3VxZOzRMaHsZ1tFr\nq4E2Dn7sB/sPGZl0MMDf0wntLVCxEJPEbCFSraL7pNCZHbniKtIY01Fy9Ydm\n2reUcHBoACQ6XWJCIYnVCJx+zM+aohWa2cmT0wy9439mI3tpCY+HzPU8Z3kg\nfii/h9+ap6pSX5uvlxFRRx8RDzz6uL2y0IHMvBcerMpOQnd4rOVUqcIH+9ns\nRc8W1Ewnev/K/2L79nY0rDqtv2NdrGmxyklYf/LQlVSeLd20og93Ig8ACan+\nMKZuygSPBpgs1E/m3ug+pMvARnatOWxJDJmcKm3WfA9gar057FJLsfv4vWab\nPvCB8E9FJsOM0+DLLUjuJUp97p2wbdPDL6d84GikH6aKLUNPb16dRPWJnZaN\n3lle\r\n=/Wqb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFWo5Yqg3ucKIWMx7Bi5xFAs+zgAAax3EhoDk4qs5w0yAiEA/MSE47DARRoCJZAhI3gOSJTmlVOQjYjL7f5kY1Pn5oc="}]},"_npmUser":{"name":"ehynds","email":"ehynds@gmail.com"},"directories":{},"maintainers":[{"name":"ehynds","email":"ehynds@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-fetch_1.0.1_1614211731704_0.42526301430984126"},"_hasShrinkwrap":false},"1.0.2":{"name":"@ehynds/use-fetch","version":"1.0.2","description":"A small, low-level React hook that wraps the Fetch API","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"test":"npm run lint && jest","lint":"eslint .","ts":"tsc --skipLibCheck --project tsconfig.json","ts:watch":"npm run ts -- --watch","build":"rm -rf dist/ && npm run ts","prepublish":"npm run build"},"author":{"name":"Eric Hynds","url":"https://github.com/ehynds"},"homepage":"https://github.com/ehynds/use-fetch","license":"MIT","keywords":["fetch","http","xhr","client","request","network","hook"],"dependencies":{},"devDependencies":{"@babel/preset-env":"^7.13.5","@babel/preset-typescript":"^7.13.0","@testing-library/react-hooks":"^5.0.3","@types/jest":"^26.0.20","@types/react":"^17.0.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/parser":"^4.15.2","eslint":"^7.20.0","jest":"^26.6.3","react":"^17.0.1","react-test-renderer":"^17.0.1","typescript":"^4.1.5"},"peerDependencies":{"react":">= 16.8.0"},"gitHead":"f6829f76fbefccefe5fbe88746bd1ac4ac5297d3","_id":"@ehynds/use-fetch@1.0.2","_nodeVersion":"12.20.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-xacp3Jmi9dSaCoIApja1TAu9AVERGc8EmXSN4ZstRBoA7nTVh1rspf/jzzxgRaLiw+XzSXwQ7f4hsgpp1ZhbjQ==","shasum":"f87723428a105748145d4babed7a2ea09eb9fcd1","tarball":"https://registry.npmjs.org/@ehynds/use-fetch/-/use-fetch-1.0.2.tgz","fileCount":18,"unpackedSize":26018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPWevCRA9TVsSAnZWagAA88wQAKUOuUEzLknXf9x9wlgj\nij6ggXvfNNTFuBs8kQ0+KJTL+SZKfrlcH/1X3tCV7mjCIpeMLDhqclP3Ot1D\n+TEl4DSLW/U/GiM+R08D1dPYCoiX+/FbRYkL5XKTnWjG7JxzxOlJLr0XJ35i\nVH/xZqweOAG4fuFBbzwDB80QBsk3SLMn6OAkxlUfElIIMJHnw/YFRatkAYoU\niWcL1yLvj8Xlv+NMJLfub/QQ/OiDKvzPhjOBBaDUQAiywsdccwHGCfrwEJKS\nm6HHjjZ+3xldk+l9tsWbYZG+9unawu+u7iBz78VAyMnYeqTlMvCcVCDV34we\n/ESvn78nFZhsuGpwEkxQ7ad2OuLLKH1XD7cgTl80Dh06309OK7yBPkfGNBsB\n2Rw42WY26fmN7tw6P2ZmdjR8IMmnvwzJitnEgyqycxSrSNM3nmSXZDSZEyth\nvR257orQnY3WFS4GmoiZJ9WPpjQChS1SzgQDqeUkkN0jWJCP53592rGvP0iO\nVizj8W87CBRTiEFYXvot+ge5HEQbaIsSgEuodwsIgXKvJ4fPypbmmY9o2uOT\nDgGje87EOoAhCAZ4fjnQZ1lJ2YBCJwc5IWuLTkwi4vt/D8Xx5hMDqPB1JBWT\nAzmQ7lpyzz3LQnVWzrz6C4ofUdxEygW1AeExZHSCtllKRsHVUWAp44nKTvTR\nk3oe\r\n=/Q3F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAeHbmKoIlQFNh6oGNTr86jxS+RMl+ROASdv84DTAXnYAiBZ1F4n0DaTxEwA5Tj53EKPgM/YrpPXJsMSwL4ZnOFDKw=="}]},"_npmUser":{"name":"ehynds","email":"ehynds@gmail.com"},"directories":{},"maintainers":[{"name":"ehynds","email":"ehynds@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-fetch_1.0.2_1614636974883_0.4036729892722122"},"_hasShrinkwrap":false},"1.0.3":{"name":"@ehynds/use-fetch","version":"1.0.3","description":"A small, low-level React hook that wraps the Fetch API","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"test":"npm run lint && jest","lint":"eslint .","ts":"tsc --skipLibCheck --project tsconfig.json","ts:watch":"npm run ts -- --watch","build":"rm -rf dist/ && npm run ts","prepublish":"npm run build"},"author":{"name":"Eric Hynds","url":"https://github.com/ehynds"},"homepage":"https://github.com/ehynds/use-fetch","license":"MIT","keywords":["fetch","http","xhr","client","request","network","hook"],"dependencies":{},"devDependencies":{"@babel/preset-env":"^7.13.12","@babel/preset-typescript":"^7.13.0","@testing-library/react-hooks":"^5.1.0","@types/jest":"^26.0.21","@types/react":"^17.0.3","@typescript-eslint/eslint-plugin":"^4.19.0","@typescript-eslint/parser":"^4.19.0","eslint":"^7.22.0","jest":"^26.6.3","react":"^17.0.2","react-test-renderer":"^17.0.2","typescript":"^4.2.3"},"peerDependencies":{"react":">= 16.8.0"},"gitHead":"15206a5ed7d249878e2e58cf323efdf280ca06f9","_id":"@ehynds/use-fetch@1.0.3","_nodeVersion":"12.20.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-VKmRKrXq8KLFMXOqgngpnhKxckUZPOd4pz/V5LCY/4gm61Bv/ALnmx9FlUbXpx8CzkWNI9ktP+u0XnXdal/wvQ==","shasum":"c9d7dcd2829fc495875e30bb2008226fb606b87a","tarball":"https://registry.npmjs.org/@ehynds/use-fetch/-/use-fetch-1.0.3.tgz","fileCount":18,"unpackedSize":26413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW6lYCRA9TVsSAnZWagAADZYP/3D+W24ww7NPwSdxC8io\no8RLhLV1SBOtl21jxox52EjuvBafvzyqg2q6uI0TUkYg6qkyYo9MQR8Tx2y/\nscTGsygFNP+M0NKxInPLCHZEsFMhTLS7r38OqxkMiLdxCYzBjlSdcI6LJGep\noFzHbDe7nKbDVVGXIUZcVY5lHlvGEvplkNqlg10HzyH31r7k4/13T4cliJSt\n6SjMDbMMGJ+L7nVXhD8yOZ7lMBVQUVyxLTKb8BF1LmXt+nYac04I2wr14Tsv\nzgb2DcVrrewe6At171ZgIEgeqAKWQn2mdsgcyUWbFFqM5kISnqS6hcvrgr0o\noFScPsbiJLLJ3DQx9cifx/Axeiabi3s0Jzfvn02/ccz3ij7CiLpOjNHYCDAQ\n7TjlCVyZOlL1TuKMK14eZW0jFRiRzbVzKufyMgP285Las3e96gSe1N8Pu+gX\nquh9htZnOob3sisN5IGnvL7jiCVT/7o0sRXv2KCYL4EI2ACMkCrcDc/lHDE+\nvnGZy0olNS81FEx981vpClMPAjWHP5SXnHSubmB/P/siVz+HJjnwlFuhx4jK\nfDyOHePs1iqAiD3YJfpxcJDFxfG13VEZpvBZoA/OG4rqS+FoLzC7KVIpmGAy\n9buduvmI6q2VkcSU4eC05u+kaPVntBY3djMO5lQbREBH0a2eNedGuLxPtDxW\nFIHr\r\n=xD2y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0fPNItaS+308CIc2PKYZfzB2t9rpnFNOdZ79nyAUffAIgSF4BoHVYVxDrV39NYS5ADdUZAfgciGKt/ZPksHBYES4="}]},"_npmUser":{"name":"ehynds","email":"ehynds@gmail.com"},"directories":{},"maintainers":[{"name":"ehynds","email":"ehynds@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-fetch_1.0.3_1616619864114_0.36265889313164834"},"_hasShrinkwrap":false}},"time":{"created":"2021-02-25T00:04:35.397Z","1.0.0":"2021-02-25T00:04:35.607Z","modified":"2022-04-05T06:58:45.438Z","1.0.1":"2021-02-25T00:08:51.863Z","1.0.2":"2021-03-01T22:16:15.054Z","1.0.3":"2021-03-24T21:04:24.230Z"},"maintainers":[{"name":"ehynds","email":"ehynds@gmail.com"}],"description":"A small, low-level React hook that wraps the Fetch API","homepage":"https://github.com/ehynds/use-fetch","author":{"name":"Eric Hynds","url":"https://github.com/ehynds"},"license":"MIT","readme":"# `use-fetch`\n\n![build status](https://github.com/ehynds/use-fetch/workflows/Build/badge.svg)\n\nA lightweight, type-safe wrapper around the [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) in the form of a React hook.\n\n## Install\n\n```bash\n$ npm i --save @ehynds/use-fetch\n\n# or\n\n$ yarn add @ehynds/use-fetch\n```\n\n## Usage\n\nPerform a `GET` request:\n\n```js\nconst { get } = useFetch();\n\n// Optional query params\nconst params = {\n  limit: 1\n};\n\n// Optional options to pass to the `fetch` request\nconst options = {\n  headers: {\n    'Authorization': 'Access-Token foo'\n  }\n};\n\nconst { json } = await get('/api', params, options);\n```\n\nEach verb method returns an object with an `abort` function and the `req`uest:\n\n```js\nconst { abort, req } = get('/api');\n\nreq.then(({ json, res }) => {\n  // `json` is the parsed response body.\n  // This lib assumes that you're interfacing with a\n  // JSON-based API. If that's not the case, use `res`\n  // to handle your response:\n  // - res.text()\n  // - res.blob()\n  console.log('Response body:', json);\n\n  // `res` is the raw fetch response.\n  // See the response docs for the full API:\n  // https://developer.mozilla.org/en-US/docs/Web/API/Response\n  console.log('Response status:', res.status);\n  console.log('Response headers', res.headers);\n});\n\n// abort the request\nabort();\n```\n\nThe return value of an HTTP verb method is not chainable for [`async/await` compatibility](https://github.com/tc39/proposal-async-await/issues/27). If you don't care about aborting and want to chain off the promise, you can write:\n\n```js\nget('/api').req.then(({ json }) => {\n  console.log('Result:', json);\n});\n\n// or async/await, which is _not_ cancellable:\n\nconst { json } = await get('/api');\nconsole.log('Result:', json);\n\n```\n\n`useFetch` exports an object with the following properties:\n\n```js\nconst {\n  get,\n  post,\n  put,\n  del,\n  head,\n  request // Escape hatch for direct access to `fetch`\n} = useFetch();\n```\n\n## Examples\n\n#### Basic `GET` request when a component mounts:\n\n```js\nimport { useFetch } from '@ehynds/use-fetch';\n\nconst SomeComponent = () => {\n  const { get } = useFetch();\n\n  useEffect() => {\n    const params = {\n      limit: 2\n    };\n\n    get('/api', params)\n      .req\n      .then(({ json }) => console.log('Result:', json))\n      .catch((err) => console.error('Error:', err));\n  }, []);\n};\n```\n#### Cancel a request on cleanup:\n\n```js\nconst SomeComponent = () => {\n  const { get } = useFetch();\n\n  useEffect(() => {\n    const { abort, req } = get('/api');\n\n    req.then(({ json }) => {\n      console.log('Result:', json);\n    });\n\n    return () => {\n      abort();\n    };\n  }, []);\n};\n```\n#### Request a `blob`:\n\n```js\nconst SomeComponent = () => {\n  const { get } = useFetch();\n\n  useEffect(() => {\n    get('image.png')\n      .req\n      .then(({ res }) => res.blob())\n      .then((imageBlob) => {\n        const imageUrl = URL.createObjectURL(imageBlob);\n        someImage.src = imageUrl;\n      });\n  }, []);\n};\n```\n#### Type your response JSON:\n\n```ts\nimport { useFetch } from '@ehynds/use-fetch';\n\ntype Book = {\n  title: string;\n  author: string;\n};\n\nconst BookList = () => {\n  const [ books, setBooks ] = useState<Book[]>([]);\n  const { get } = useFetch();\n\n  useEffect(() => {\n    const params = {\n      limit: 1\n    };\n    get<Book[]>('/books/list', params)\n      .req\n      .then(({ json: books }) => setBooks(books));\n  }, []);\n\n  ...\n}\n```\n#### Manage loading & error states with the `useFetchState` helper:\n\n```tsx\nimport { useFetch, useFetchState } from '@ehynds/use-fetch';\n\ntype Book = {\n  title: string;\n  author: string;\n};\n\nconst useBooks = () => {\n  const { loading, data, error, setLoading, setData, setError } = useFetchState<Book[]>();\n  const { get } = useFetch();\n\n  useEffect(() => {\n    setLoading(true);\n\n    const { abort, req } = get<Book[]>('https://my-api.com/books/list', {\n      limit: 2\n    });\n\n    req\n      .then(({ json: books }) => setData(books))\n      .catch(err => setError(err));\n\n    return () => {\n      abort();\n    };\n  }, []);\n\n  return {\n    loading,\n    data,\n    error\n  };\n}\n\nconst BookList = () => {\n  const { loading, data, error } = useBooks();\n\n  if (loading) {\n    return <div>Loading...</div>\n  }\n\n  if (error) {\n    return <div>An error occurred: {error.message}</div>;\n  }\n\n  return (\n    <>\n      <h1>My books:</h1>\n\n      <ul>\n        {data.map((book) => (\n          <li key={book.title}>\n            {book.title} by {book.author}\n          </li>\n        ))}\n      </ul>\n    </>\n  );\n};\n```","readmeFilename":"README.md","keywords":["fetch","http","xhr","client","request","network","hook"]}