\r\n\r\nCollection of utils to work with asynchronous data in React in a more declarative way. Featuring `useAsyncTask` hook, especially useful to fetch data. It is delightful to use with TypeScript, but it can equally be used with JavaScript.\r\n\r\n# Table of Contents\r\n\r\n\r\n\r\n\r\n- [The problem](#the-problem)\r\n- [This solution](#this-solution)\r\n- [Installation](#installation)\r\n- [The new `Async` data concept](#the-new-async-data-concept)\r\n - [The 4 basic states of `Async` data](#the-4-basic-states-of-async-data)\r\n - [useAsyncTask hook](#useasynctask-hook)\r\n - [Auto trigger as an effect](#auto-trigger-as-an-effect)\r\n - [Rendering `Async` data](#rendering-async-data)\r\n - [render](#render)\r\n - [AsyncViewContainer](#asyncviewcontainer)\r\n- [API Reference (WIP)](#api-reference-wip)\r\n- [Contributing](#contributing)\r\n- [LICENSE](#license)\r\n\r\n\r\n\r\n# The problem\r\n\r\nDealing with asynchronous data is usually an imperative process, harder to express in a declarative manner, such as React promotes. It usually results in using a combination of variables/properties to keep track of the possible states:\r\n\r\n```javascript\r\nlet loading;\r\nlet data;\r\nlet error;\r\n// Even more...\r\n...\r\n```\r\n\r\nThis a somehow complex construct for such an ubiquitous case. It can lead to verbose code, even more when dealing with multiple pieces of async data at the same time. Some of these combinations don't even make sense (`loading === true && error !== undefined`?).\r\n\r\nSo, it can feel awkward to follow this pattern. And you probably need to repeat that \"boilerplate\" a lot in your app.\r\n\r\n# This solution\r\n\r\nThe base of this library is \"[making impossible states impossible](https://blog.kentcdodds.com/make-impossible-states-impossible-cf85b97795c1)\" for async data, and building abstractions around it.\r\n\r\nWe do not separate the data itself from its asynchronous state, we consider it an intrinsic part of its nature. And so we put it all together as a new data type consistent with this async nature.\r\n\r\nWe named this data type `Async`.\r\n\r\n```typescript\r\nlet asyncPerson: Async;\r\n```\r\n\r\nIt can be considered the declarative counterpart of a `Promise`.\r\n\r\nThis new data type allows us to create some powerful abstractions, like the `useAsyncTask` custom hook\r\n\r\n```typescript\r\nconst [asyncPerson] = useAsyncTask(getPersonPromise, { triggerAsEffect: true });\r\n```\r\n\r\nwhich we will explain further down.\r\n\r\n# Installation\r\n\r\n```bash\r\nnpm install react-async-utils\r\n```\r\n\r\n# The new `Async` data concept\r\n\r\nWe are going to deal with async data in all of its possible states as a single entity. This entity includes all possible states and related data within it, in an ordered (and type-safe) manner.\r\n\r\n## The 4 basic states of `Async` data\r\n\r\nWe consider any `Async` data can exist in one of this 4 states:\r\n\r\n- **INIT**: nothing has happened yet. This is time 0 of our async process:\r\n\r\n```typescript\r\ninterface InitAsync {\r\n progress: Progress.Init;\r\n}\r\n```\r\n\r\n- **IN PROGRESS**: our async process is happening. We are waiting for its outcome:\r\n\r\n```typescript\r\ninterface InProgressAsync {\r\n progress: Progress.InProgress;\r\n}\r\n```\r\n\r\n- **SUCCESS**: our async process is successfully completed. The actual data will be available in its **payload**:\r\n\r\n```typescript\r\ninterface SuccessAsync {\r\n progress: Progress.Success;\r\n payload: Payload;\r\n}\r\n```\r\n\r\n- **ERROR**: our async process failed. There will be an **error**, the cause of this failure:\r\n\r\n```typescript\r\ninterface ErrorAsync {\r\n progress: Progress.Error;\r\n error: Error;\r\n}\r\n```\r\n\r\nAnd so, an `Async` data encapsulates the 4 states of a piece of data along the async process within a single data type:\r\n\r\n```typescript\r\nexport type Async =\r\n | InitAsync\r\n | InProgressAsync\r\n | SuccessAsync\r\n | ErrorAsync;\r\n```\r\n\r\nThis data type is the base of our library. Take your time to understand it, and we will be able to do great things with it.\r\n\r\n## useAsyncTask hook\r\n\r\nA powerful abstraction to manage the whole async process in a declarative way:\r\n\r\n```typescript\r\nconst [asyncPerson, triggerGetPerson] = useAsyncTask(getPersonPromise);\r\n\r\nconst triggerButton = (\r\n \r\n);\r\n```\r\n\r\n- **`getPersonPromise`**: input function that returns a `Promise`.\r\n- **`asyncPerson`**: it is our `Async` data. It will be in the `InitAsync` state at the beginning, but will start getting updated once the async task is triggered.\r\n- **`triggerGetPerson`**: a function that triggers the async task. It will call `getPersonPromise` when invoked, and it will update `asyncPerson` state according to the returned `Promise` state.\r\n\r\nYou can call `triggerGetPerson` whenever you need it.\r\n\r\n### Auto trigger as an effect\r\n\r\nYou can also trigger the async task automatically as an effect, providing the `triggerAsEffect` option as `true`:\r\n\r\n```typescript\r\nconst [asyncPerson] = useAsyncTask(getPersonPromise, { triggerAsEffect: true });\r\n```\r\n\r\nBe careful, since if you use the `triggerAsEffect` option, input functions of `useAsyncTask` hook will be dependencies of that effect. In that case you want to use `useCallback` if necessary with them to avoid infinite re-renders and infinite calls to your `getPersonPromise`.\r\n\r\n\r\n\r\nOf course you can use both _triggerAsEffect_ option and the returned _triggerAsyncTask_ function at the same time.\r\n\r\n## Rendering `Async` data\r\n\r\n### render\r\n\r\nA good option is the `render` helper method. You can provide a render method per state. The corresponding one will be used:\r\n\r\n```tsx\r\nimport { render } from 'react-async-utls';\r\n\r\nrender(asyncPerson, {\r\n init: () =>
Init state render. Nothing happened yet.
,\r\n inProgress: () => (\r\n
In Progress state render. We are fetching our Person.
\r\n ),\r\n success: person => (\r\n
Successful state render. Please welcome {person.name}!
\r\n ),\r\n error: error => (\r\n
Error state render. Something went wrong: {error.message}
\r\n ),\r\n});\r\n```\r\n\r\n### AsyncViewContainer\r\n\r\nAnother option is the `AsyncViewContainer` component:\r\n\r\n```tsx\r\nimport { AsyncViewContainer, getPayload } from 'react-async-utls';\r\n\r\nfunction MyComponent({ asyncPerson }) {\r\n person = getPayload(asyncPerson);\r\n return (\r\n 'Loading person...'}\r\n errorRender={error => `Something went wrong: ${error.message}`}\r\n >\r\n {person ? : 'No Data'}\r\n \r\n );\r\n}\r\n```\r\n\r\nApart from its children, it will render the render method corresponding to the `Async` data state.\r\n\r\nBONUS: `AsyncViewContainer` accepts an array at the `asyncData` prop :\r\n\r\n```tsx\r\nfunction MyComponent({ asyncPerson }) {\r\n return (\r\n 'Loading stuff...'}\r\n errorRender={errors => errors.map(error => error.message).join(' AND ')}\r\n >\r\n // ...\r\n \r\n );\r\n}\r\n```\r\n\r\nIt will render the corresponding render method if _any_ `Async` data is on that state.\r\n\r\n# API Reference (WIP)\r\n\r\nWork in progress.\r\n\r\n# Contributing\r\n\r\nThis is my first OSS. Open to contributions and willing to learn!\r\n\r\n# LICENSE\r\n\r\nMIT\r\n","readmeFilename":"README.md","gitHead":"5c8c1cc49f1c957b90b54bae8018019b7aad61a4","bugs":{"url":"https://github.com/CarlosGines/react-async-utils/issues"},"homepage":"https://github.com/CarlosGines/react-async-utils#readme","_id":"react-async-utils@0.10.2-alpha.0","_nodeVersion":"10.14.2","_npmVersion":"6.9.0","dist":{"integrity":"sha512-NkAN3EbDdDt9JdOzOsON9EhN6euuCMRNNKcfjx9DkF+2mp+2i5PFSbbUAuLw2nJspWQmDYSsotJ+h9HQwLl7sw==","shasum":"def13c2e9b812094e40f6a0431280d1d943b7a18","tarball":"https://registry.npmjs.org/react-async-utils/-/react-async-utils-0.10.2-alpha.0.tgz","fileCount":22,"unpackedSize":41114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckC3WCRA9TVsSAnZWagAAapUP/1MZ9++8+PcINII3oa1D\naEY2JPav3dEmrTRVwwgqVfLkHkkMnX8brfVkMz3Clj67AbMb5uMYRFZ6LfB0\nEqI+QilAj2BdDx1yI3Ned/ev4XvuqQbT5aEWXli0dPd2BlfygYVgBXAsInXF\nPUd6sXpnBZb+BR5a8KymK8G6S0QJxGWWXzVRFx2F+22+Yo/5CTAeYPdNA23x\nAr59hHjfzQz10uUQnjkTJ2hTrnSDPYDospSKhT7Py5bY1+Xousote2vRY/vz\nE9pUMIArj3KHZf0Gbzxvt6Ckrg2eZf7VAvqp2CwqnA5yw7pR/q98G4TjWbjh\nawu7lD0hNBh/IHEUJRAb7cMJzhvRUHfIkTsoM3Hc/UaOoZ0OrIm7jrVBn8zd\nYIHixI2f1OqMSaWJgFsIvJff0UestX1qyaoRdKeMqtMYVBv2Xnn9Sbw3TXb7\nq44FD3XWE+ELj63HWXSxjlkDme4MQM1H1ZFv+7iu76Ya5sx537pHN6pd3N1t\nFacNE6UIY+BVcYTjI+ItUPl3wAkIM5vFZCL4ovs7l/gN0ZYwsPFftw4bnF5l\nK7GBnLg3udl/7BbS6pMTf2Ygkfi3YYYf82UAdzloC3ZbrINie69F51X+9DZN\n6gHPDI02IJuwPyc66PxD41jl8hJVA1xmuIYTqJM16+OTjfdo82TM9DK7+e25\nce9a\r\n=GNxG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgs+wZHJqeDEe4OG9UYEf4W+9HVzOUK/1Ew1r1OrunmgIhAO62HVvGXq+NNGiw3xgIcMxBBx/bv2AGW0NmFmyeoMlf"}]},"maintainers":[{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"}],"_npmUser":{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-async-utils_0.10.2-alpha.0_1552952789574_0.5173835111511274"},"_hasShrinkwrap":false},"0.10.2-alpha.1":{"name":"react-async-utils","version":"0.10.2-alpha.1","description":"Collection of utils to work with asynchronous data in React in a more declarative way.","keywords":["async","declarative","fetch","hooks","promise","react","reacthooks","reactjs","utils"],"main":"./lib/index.js","typings":"./lib/index.d.ts","dependencies":{"@types/node":"^11.11.3","@types/react":"^16.8.8"},"devDependencies":{"@babel/core":"^7.3.4","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react-dom":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.4.2","coveralls":"^3.0.3","eslint":"^5.15.2","eslint-config-prettier":"^4.1.0","eslint-plugin-jest":"^22.4.1","eslint-plugin-react":"^7.12.4","eslint-plugin-react-hooks":"^1.5.1","jest":"^24.3.1","jest-dom":"^3.1.3","react":"^16.8.4","react-dom":"^16.8.4","react-testing-library":"^6.0.0","typescript":"^3.3.3333"},"peerDependencies":{"react":">=16.8.0"},"scripts":{"lint":"eslint . --ext \".ts,.tsx\"","watch":"tsc --watch","test":"jest","coverage":"jest --coverage --coverageReporters=text-lcov | coveralls","build":"tsc"},"author":{"name":"Carlos Gines","email":"carlos.gines.fuster@gmail.com","url":"https://twitter.com/_carlosgines"},"repository":{"type":"git","url":"git+https://github.com/CarlosGines/react-async-utils.git"},"license":"MIT","browserslist":[">0.2%","not dead","not ie <= 11","not op_mini all"],"prettier":{"singleQuote":true,"trailingComma":"all"},"readme":"
\r\n\r\nCollection of utils to work with asynchronous data in React in a more declarative way. Featuring `useAsyncTask` hook, especially useful to fetch data. It is delightful to use with TypeScript, but it can equally be used with JavaScript.\r\n\r\n# Table of Contents\r\n\r\n\r\n\r\n\r\n- [The problem](#the-problem)\r\n- [This solution](#this-solution)\r\n- [Installation](#installation)\r\n- [The new `Async` data concept](#the-new-async-data-concept)\r\n - [The 4 basic states of `Async` data](#the-4-basic-states-of-async-data)\r\n - [useAsyncTask hook](#useasynctask-hook)\r\n - [Auto trigger as an effect](#auto-trigger-as-an-effect)\r\n - [Rendering `Async` data](#rendering-async-data)\r\n - [render](#render)\r\n - [AsyncViewContainer](#asyncviewcontainer)\r\n- [API Reference (WIP)](#api-reference-wip)\r\n- [Contributing](#contributing)\r\n- [LICENSE](#license)\r\n\r\n\r\n\r\n# The problem\r\n\r\nDealing with asynchronous data is usually an imperative process, harder to express in a declarative manner, such as React promotes. It usually results in using a combination of variables/properties to keep track of the possible states:\r\n\r\n```javascript\r\nlet loading;\r\nlet data;\r\nlet error;\r\n// Even more...\r\n...\r\n```\r\n\r\nThis a somehow complex construct for such an ubiquitous case. It can lead to verbose code, even more when dealing with multiple pieces of async data at the same time. Some of these combinations don't even make sense (`loading === true && error !== undefined`?).\r\n\r\nSo, it can feel awkward to follow this pattern. And you probably need to repeat that \"boilerplate\" a lot in your app.\r\n\r\n# This solution\r\n\r\nThe base of this library is \"[making impossible states impossible](https://blog.kentcdodds.com/make-impossible-states-impossible-cf85b97795c1)\" for async data, and building abstractions around it.\r\n\r\nWe do not separate the data itself from its asynchronous state, we consider it an intrinsic part of its nature. And so we put it all together as a new data type consistent with this async nature.\r\n\r\nWe named this data type `Async`.\r\n\r\n```typescript\r\nlet asyncPerson: Async;\r\n```\r\n\r\nIt can be considered the declarative counterpart of a `Promise`.\r\n\r\nThis new data type allows us to create some powerful abstractions, like the `useAsyncTask` custom hook\r\n\r\n```typescript\r\nconst [asyncPerson] = useAsyncTask(getPersonPromise, { triggerAsEffect: true });\r\n```\r\n\r\nwhich we will explain further down.\r\n\r\n# Installation\r\n\r\n```bash\r\nnpm install react-async-utils\r\n```\r\n\r\n# The new `Async` data concept\r\n\r\nWe are going to deal with async data in all of its possible states as a single entity. This entity includes all possible states and related data within it, in an ordered (and type-safe) manner.\r\n\r\n## The 4 basic states of `Async` data\r\n\r\nWe consider any `Async` data can exist in one of this 4 states:\r\n\r\n- **INIT**: nothing has happened yet. This is time 0 of our async process:\r\n\r\n```typescript\r\ninterface InitAsync {\r\n progress: Progress.Init;\r\n}\r\n```\r\n\r\n- **IN PROGRESS**: our async process is happening. We are waiting for its outcome:\r\n\r\n```typescript\r\ninterface InProgressAsync {\r\n progress: Progress.InProgress;\r\n}\r\n```\r\n\r\n- **SUCCESS**: our async process is successfully completed. The actual data will be available in its **payload**:\r\n\r\n```typescript\r\ninterface SuccessAsync {\r\n progress: Progress.Success;\r\n payload: Payload;\r\n}\r\n```\r\n\r\n- **ERROR**: our async process failed. There will be an **error**, the cause of this failure:\r\n\r\n```typescript\r\ninterface ErrorAsync {\r\n progress: Progress.Error;\r\n error: Error;\r\n}\r\n```\r\n\r\nAnd so, an `Async` data encapsulates the 4 states of a piece of data along the async process within a single data type:\r\n\r\n```typescript\r\nexport type Async =\r\n | InitAsync\r\n | InProgressAsync\r\n | SuccessAsync\r\n | ErrorAsync;\r\n```\r\n\r\nThis data type is the base of our library. Take your time to understand it, and we will be able to do great things with it.\r\n\r\n## useAsyncTask hook\r\n\r\nA powerful abstraction to manage the whole async process in a declarative way:\r\n\r\n```typescript\r\nconst [asyncPerson, triggerGetPerson] = useAsyncTask(getPersonPromise);\r\n\r\nconst triggerButton = (\r\n \r\n);\r\n```\r\n\r\n- **`getPersonPromise`**: input function that returns a `Promise`.\r\n- **`asyncPerson`**: it is our `Async` data. It will be in the `InitAsync` state at the beginning, but will start getting updated once the async task is triggered.\r\n- **`triggerGetPerson`**: a function that triggers the async task. It will call `getPersonPromise` when invoked, and it will update `asyncPerson` state according to the returned `Promise` state.\r\n\r\nYou can call `triggerGetPerson` whenever you need it.\r\n\r\n### Auto trigger as an effect\r\n\r\nYou can also trigger the async task automatically as an effect, providing the `triggerAsEffect` option as `true`:\r\n\r\n```typescript\r\nconst [asyncPerson] = useAsyncTask(getPersonPromise, { triggerAsEffect: true });\r\n```\r\n\r\nBe careful, since if you use the `triggerAsEffect` option, input functions of `useAsyncTask` hook will be dependencies of that effect. In that case you want to use `useCallback` if necessary with them to avoid infinite re-renders and infinite calls to your `getPersonPromise`.\r\n\r\n\r\n\r\nOf course you can use both _triggerAsEffect_ option and the returned _triggerAsyncTask_ function at the same time.\r\n\r\n## Rendering `Async` data\r\n\r\n### render\r\n\r\nA good option is the `render` helper method. You can provide a render method per state. The corresponding one will be used:\r\n\r\n```tsx\r\nimport { render } from 'react-async-utls';\r\n\r\nrender(asyncPerson, {\r\n init: () =>
Init state render. Nothing happened yet.
,\r\n inProgress: () => (\r\n
In Progress state render. We are fetching our Person.
\r\n ),\r\n success: person => (\r\n
Successful state render. Please welcome {person.name}!
\r\n ),\r\n error: error => (\r\n
Error state render. Something went wrong: {error.message}
\r\n ),\r\n});\r\n```\r\n\r\n### AsyncViewContainer\r\n\r\nAnother option is the `AsyncViewContainer` component:\r\n\r\n```tsx\r\nimport { AsyncViewContainer, getPayload } from 'react-async-utls';\r\n\r\nfunction MyComponent({ asyncPerson }) {\r\n person = getPayload(asyncPerson);\r\n return (\r\n 'Loading person...'}\r\n errorRender={error => `Something went wrong: ${error.message}`}\r\n >\r\n {person ? : 'No Data'}\r\n \r\n );\r\n}\r\n```\r\n\r\nApart from its children, it will render the render method corresponding to the `Async` data state.\r\n\r\nBONUS: `AsyncViewContainer` accepts an array at the `asyncData` prop :\r\n\r\n```tsx\r\nfunction MyComponent({ asyncPerson }) {\r\n return (\r\n 'Loading stuff...'}\r\n errorRender={errors => errors.map(error => error.message).join(' AND ')}\r\n >\r\n // ...\r\n \r\n );\r\n}\r\n```\r\n\r\nIt will render the corresponding render method if _any_ `Async` data is on that state.\r\n\r\n# API Reference (WIP)\r\n\r\nWork in progress.\r\n\r\n# Contributing\r\n\r\nThis is my first OSS. Open to contributions and willing to learn!\r\n\r\n# LICENSE\r\n\r\nMIT\r\n","readmeFilename":"README.md","gitHead":"5c8c1cc49f1c957b90b54bae8018019b7aad61a4","bugs":{"url":"https://github.com/CarlosGines/react-async-utils/issues"},"homepage":"https://github.com/CarlosGines/react-async-utils#readme","_id":"react-async-utils@0.10.2-alpha.1","_nodeVersion":"10.14.2","_npmVersion":"6.9.0","dist":{"integrity":"sha512-GT2DMvCiWIa+bhPqB6RCV3BlruSJ1NbWHPPH8C6gHYbdHEk40pOw4eUgQnxcVyPCb0SpXr51iSPxHZyFpYrMiQ==","shasum":"fa6e06fbf80fb505d02d5867e0dd851c31ab8012","tarball":"https://registry.npmjs.org/react-async-utils/-/react-async-utils-0.10.2-alpha.1.tgz","fileCount":28,"unpackedSize":51930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckDSHCRA9TVsSAnZWagAA/T8P/2yODPGK50f3OaP3jGLo\nLyShwRiJp2PIgnMoMPiZHAplz/6Z4YnlqaPy+9TlTvfTLY/IZyJduwYORB9s\n6Ya8BF83vjWrejPG9lXSkQVmYbqTckV6RzBgBXrSxGPOtemjwKILFkygr3OM\n8M0cJ+jzVLLSj4NI6pmT/Z4NBgd0IXrNOpbQWooXiPwiDtCnkfLyAwqPn6/5\n6skd/Tx2ICh9KwUqlU2/nQrEjik5PM3OSY2Q7T4aVn39lDOpuc6s4Asgmc1a\n8QMLj3V0huuzZl0tJb2mpn9Vrcz3J6cAZDjJOrW4WfJR/oo+UxApzvs+X7Ln\n/MrkMrTbhzz/4NKMu2/KDGhixwrkdvbEmtNDW5DBWp5zn8DE9ug5HSB8LT/Q\nCoG23eQ/tilEx0Uxt3b2Q/zHMxnlZx77lggZCn52hhx5aQTczGB7iXl1usum\nkRMNsuNAKBJh/k05KhlWGRmQJx9TDz/ORe+2CKbaFUAKpto556a5SRWV509E\nWjaI8FNsnRntT605CKpkje3elNSCYJQd7N0RVQF2fI84smwTxZstjH/D0PDW\nGOoDeVjxBtdvXyTEcAhHI6UEaHhIX1/ga4j9D8Wn+1VEe3eHKAsS0CF+/Za5\nq+f0vEYhm19cC2iAFqaz/7NhbicmkRrNZbyXGG1V8o7iMLoZgwdpHLonWs49\nn7l3\r\n=fJvI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDx5u+YGIFnA3ckjucG4i3Yyh84vD+G+goSsaO0r0/Z5AiEA7TzN1mQ3fCcRq9vDLr1I84dCLvxgnhqGVHzkJp8l8N8="}]},"maintainers":[{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"}],"_npmUser":{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-async-utils_0.10.2-alpha.1_1552954502789_0.42256238041711414"},"_hasShrinkwrap":false},"0.10.2":{"name":"react-async-utils","version":"0.10.2","description":"Collection of utils to work with asynchronous data in React in a more declarative way.","keywords":["async","declarative","fetch","hooks","promise","react","reacthooks","reactjs","utils"],"main":"./lib/index.js","typings":"./lib/index.d.ts","dependencies":{"@types/node":"^11.11.3","@types/react":"^16.8.8"},"devDependencies":{"@babel/core":"^7.3.4","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react-dom":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.4.2","coveralls":"^3.0.3","eslint":"^5.15.2","eslint-config-prettier":"^4.1.0","eslint-plugin-jest":"^22.4.1","eslint-plugin-react":"^7.12.4","eslint-plugin-react-hooks":"^1.5.1","jest":"^24.3.1","jest-dom":"^3.1.3","react":"^16.8.4","react-dom":"^16.8.4","react-testing-library":"^6.0.0","typescript":"^3.3.3333"},"peerDependencies":{"react":">=16.8.0"},"scripts":{"lint":"eslint . --ext \".ts,.tsx\"","watch":"tsc --watch","test":"jest","coverage":"jest --coverage --coverageReporters=text-lcov | coveralls","build":"tsc"},"author":{"name":"Carlos Gines","email":"carlos.gines.fuster@gmail.com","url":"https://twitter.com/_carlosgines"},"repository":{"type":"git","url":"git+https://github.com/CarlosGines/react-async-utils.git"},"license":"MIT","browserslist":[">0.2%","not dead","not ie <= 11","not op_mini all"],"prettier":{"singleQuote":true,"trailingComma":"all"},"gitHead":"4faaa8d662cd70468c24a8cf1f49034eca03df4d","bugs":{"url":"https://github.com/CarlosGines/react-async-utils/issues"},"homepage":"https://github.com/CarlosGines/react-async-utils#readme","_id":"react-async-utils@0.10.2","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"},"dist":{"integrity":"sha512-rEVe8Ac3zs6z+YImdfRbF56RMn9HiTl9YUmyG/nrk/fxF3oxtswoISbIl6VGVKbREsmmx7SpaqQR/jsAmTJBaA==","shasum":"a88e00392fa4b7e08168985c638d71c92f986b30","tarball":"https://registry.npmjs.org/react-async-utils/-/react-async-utils-0.10.2.tgz","fileCount":28,"unpackedSize":42932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckEh2CRA9TVsSAnZWagAAgP0P/3B5MpBSJIdXtDB9olIN\nvtxVEVrKzG23biyxn2LN6onYH+X1mgNQAByqMhwN+B6etcsl1sV0VhksepEx\nj/nIrnOlz+k5AYHEf+GFCD0SY67yeKp18VxVtBcAY4Ovbe+NkeAMNyhceFHN\nIG1RDbo+GfYXaXwldYqOZuCw3i9eBYd4ioicPhaHp9lMFt2WiF1VfQJ6SYgu\nMaK8H9rUxt2xydV6yevN4tSx2U/UOfjrTa8mWQHN4V2pEHg8wlN1L9MNTOHM\ntxRACxfBnR0nI6Vz5VoH8k64nAL/WwNFq01y/IlUI5poAhp7LzKDpQrfRm9L\nsOPtVnCvJpVOOEgx3D/iMr/ErsEIINZKN53jM+Fdmeq/2OxM77sC2R/lpOxk\nK902JLG2UAyySLuHvIrX+5GWDvotCzi9t3P3PVIqsNNzzwKYWkdOmzwIybU5\n9Gn7u6okRiyfwxEgYwteC0hcWm741CDdHRVLfLQuDEh0wMcJWj96QfZUpI7r\nBwJmsgH/i4RN3WJrEaLHKvc/zhCrm3PbmGH2OC7+3bb1PKhq/BFLa9ygGcDG\nLt/qZl2giRg+GM1DvU3Azto6/vln1Rdj904oHQQw5vwC81tMleK8Y472P2T5\nip0XocB3jOguBuVy3wmkxWewJcyxIeYbIte9xFBdvfReZQpDZ7kQvZBy1Iw7\njlZI\r\n=7Jmb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxJSu9J3p+mKQ6PX7XIBVGltaRyEqEhj4L5XZsp262AwIgOBfW/dycsjp9b6dk9gn0lM10LpFMaKam1tIttuRAUUo="}]},"maintainers":[{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-async-utils_0.10.2_1552959605638_0.2725692476807773"},"_hasShrinkwrap":false},"0.10.3":{"name":"react-async-utils","version":"0.10.3","description":"Collection of utils to work with asynchronous data in React in a more declarative way.","keywords":["async","declarative","fetch","hooks","promise","react","reacthooks","reactjs","utils"],"main":"./lib/index.js","typings":"./lib/index.d.ts","dependencies":{"@types/node":"^11.11.4","@types/react":"^16.8.8"},"devDependencies":{"@babel/core":"^7.4.0","@babel/preset-env":"^7.4.2","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react-dom":"^16.8.3","@typescript-eslint/eslint-plugin":"^1.5.0","@typescript-eslint/parser":"^1.5.0","coveralls":"^3.0.3","eslint":"^5.15.3","eslint-config-prettier":"^4.1.0","eslint-plugin-jest":"^22.4.1","eslint-plugin-react":"^7.12.4","eslint-plugin-react-hooks":"^1.5.1","jest":"^24.5.0","jest-dom":"^3.1.3","react":"^16.8.4","react-dom":"^16.8.4","react-testing-library":"^6.0.2","typescript":"^3.3.4000"},"peerDependencies":{"react":">=16.8.0"},"scripts":{"lint":"eslint . --ext \".ts,.tsx\"","watch":"tsc --watch","test":"jest","coverage":"jest --coverage --coverageReporters=text-lcov | coveralls","build":"tsc"},"author":{"name":"Carlos Gines","email":"carlos.gines.fuster@gmail.com","url":"https://twitter.com/_carlosgines"},"repository":{"type":"git","url":"git+https://github.com/CarlosGines/react-async-utils.git"},"license":"MIT","browserslist":[">0.2%","not dead","not ie <= 11","not op_mini all"],"prettier":{"singleQuote":true,"trailingComma":"all"},"gitHead":"b1bf2cc60a27365ee47f41beb93c2f5fc719c691","bugs":{"url":"https://github.com/CarlosGines/react-async-utils/issues"},"homepage":"https://github.com/CarlosGines/react-async-utils#readme","_id":"react-async-utils@0.10.3","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"},"dist":{"integrity":"sha512-eJCIetvLul84YgWWpNVlsCj7WmXMDem0rOlrN1c8us9ljHqUPni4azjPhqkkpm6EgFJuDSdI8sEiF20u0q7ppg==","shasum":"385996a7671a3b5430c29b82ea45627cd6382f38","tarball":"https://registry.npmjs.org/react-async-utils/-/react-async-utils-0.10.3.tgz","fileCount":28,"unpackedSize":45428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJck+iJCRA9TVsSAnZWagAAXBIP+gIq4wtM0C+saCpzsF3W\nnDaUqpVVKX6RT6v8yueawIFc5uV8JC19+xS2paVAueyYjxkchmMfi14m+WuZ\n3WVVyEXnWahPDQc2puqE8tCw6RtO5kIbVSrF7HP5maW+t8cpTP8bfhrgGAOS\nfiR5AwG+7ERfpjstei0uzK5f/sEQ4F42TtfZ0lNLr4wkvyBW5rNMD4rY5E2S\nwEfMLnrGpo2LrlSqQM4GREWZ7QFXqxwt7DUcPp/sEPBv7fCd/pMdLKt69t+I\nRC60PayjVtMVioaR1C6zzIozRV7xEnWXPYe+u6tCyjMPmTuqTVr2EtG7jE6z\nz1/UFEJ8SxDhbqkp+TT0H8u5qAzHmutv/clupnpHbt8xp+1qBln1IOdENfRz\nqzcm3m/7NZofPZqibzpgRxz1Q5WSencqp9lFlqcQqKNjVHIYCRJDZERNXmde\nj3U+KnXY7Ax6dv+5vR0S+5g++AIrQx3fSUtLqOorlEaRxqDTUdqg/bT9uXe5\noRVz5zvzYPBPfjlJEKeudnF1J73BHHqkO5dB8tCCCbv1GkMWVm23Gns54MXM\nIenr0ex+pv1rvOY+zxFQ/cu6qV1QrUO9w2xJlTnTcN9Jb1qZcmEkEnXaU0ad\nfnkXwprWp7gQ87fEjUxnZyW+WHuzg2QGIyVTjtazYMF58B4UwdWg1I/z+QfL\nDgD7\r\n=wFf9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+jtYcWGRplxpt6AdXztKKFt1HaUG3jntCzTVT95G0OwIgDJVoV+5Q1cNJ4RqZSCTsZvWDAjJkypcKSdxQCZ5qzRc="}]},"maintainers":[{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-async-utils_0.10.3_1553197192533_0.1058792450499475"},"_hasShrinkwrap":false},"0.11.0":{"name":"react-async-utils","version":"0.11.0","description":"Collection of utils to work with asynchronous data in React in a more declarative way.","keywords":["async","declarative","fetch","hooks","promise","react","reacthooks","reactjs","utils"],"main":"./lib/index.js","typings":"./lib/index.d.ts","dependencies":{"@types/node":"^11.11.5","@types/react":"^16.8.8"},"devDependencies":{"@babel/core":"^7.4.0","@babel/preset-env":"^7.4.2","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react-dom":"^16.8.3","@typescript-eslint/eslint-plugin":"^1.5.0","@typescript-eslint/parser":"^1.5.0","coveralls":"^3.0.3","eslint":"^5.15.3","eslint-config-prettier":"^4.1.0","eslint-plugin-jest":"^22.4.1","eslint-plugin-react":"^7.12.4","eslint-plugin-react-hooks":"^1.5.1","jest":"^24.5.0","jest-dom":"^3.1.3","react":"^16.8.4","react-dom":"^16.8.4","react-testing-library":"^6.0.2","typescript":"^3.3.4000"},"peerDependencies":{"react":">=16.8.0"},"scripts":{"lint":"eslint . --ext \".ts,.tsx\"","watch":"tsc --watch","test":"jest","coverage":"jest --coverage --coverageReporters=text-lcov | coveralls","build":"tsc"},"author":{"name":"Carlos Gines","email":"carlos.gines.fuster@gmail.com","url":"https://twitter.com/_carlosgines"},"repository":{"type":"git","url":"git+https://github.com/CarlosGines/react-async-utils.git"},"license":"MIT","browserslist":[">0.2%","not dead","not ie <= 11","not op_mini all"],"prettier":{"singleQuote":true,"trailingComma":"all"},"gitHead":"d271829ccbb43dc8611c67339c68b8a61b4f6b54","bugs":{"url":"https://github.com/CarlosGines/react-async-utils/issues"},"homepage":"https://github.com/CarlosGines/react-async-utils#readme","_id":"react-async-utils@0.11.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"},"dist":{"integrity":"sha512-y8ARkTjQDGxtqPtUMt1HKZbeXeKkUo/C/nIBf+cMYiUk/0MRM2i3pkvBPLC+5NIAcQ89JZNjWLC2TnE2ZjV+Qw==","shasum":"580428dce087d48bd70d00eb7cf3b8af4c964f7a","tarball":"https://registry.npmjs.org/react-async-utils/-/react-async-utils-0.11.0.tgz","fileCount":28,"unpackedSize":46353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJclCi6CRA9TVsSAnZWagAAzaYP/3XA3ZC1x84hEvFq+Bia\nbiskwmnbe7CtnAiBKOollaSjJ3cLnScLEO7sVGjwdPHkFG+1uXzwa/V+xLXk\nZy9mGBtqMHt9tpEJOM115UsrhdWcDt+BZKYCgVykdZIzSuqXhJaFat5X+p3x\ndJB3NL2HfBY7RETp6syMlt0rTF+hmaG6EiWniBYB6a6ltmksJO8hKGy1stOG\ns4Ny02BqH35LCkp6zwArNQyhXpTBcSM2Ev/8X6QI5i+BhhAG7GEWs+YqMqkY\nLlU3WuqwSIOy1CZlQTMN1IiSwjSvvAwkCjVksPwnAgv9i8bYeLFbSob61p8g\nkcbHtNJoBOxDnYxuA5G9RUzCcnNXpXPDIViuaensNrYHQJxUzkKpyIBGAx1Y\nZekBBweV9qchJEaY0a8a6W8VkWb2Ps2b7BXpjoocHqUk+OXwSdMWv8Jh986Q\n581DVUmIXMCry1NjRDP1KaNAziTAS2YofHz9eWOCWFbj9WVsLNfmjiiuurlv\ncIX6E8OEsj/5nlH6E8ZyjXvCaJrOJbt3v33x0gdF5shptnpo5YjuNoa/gKfY\nD6tO7/uacfNUFRvU2fRF4JNSgl3ufXWie85iwX83YaDth1XobJz+5UAxkTs6\nQ3cA5aZQT1cff1cEY/sYVsCc7TyCGay6H2RL5jy3JK6VgaGMRxhU4o7nmBYY\nRmIR\r\n=VsjU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDyKfxapy03lUZE29tHEo//aLpIop2m+XyzgJB73EnoIAiADjra3x1ixFdLexgwGnZ/DCRvcNAznjt5MWtmwOtbByQ=="}]},"maintainers":[{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-async-utils_0.11.0_1553213625851_0.5697690274527651"},"_hasShrinkwrap":false},"0.12.0-alpha.0":{"name":"react-async-utils","version":"0.12.0-alpha.0","description":"Collection of utils to work with asynchronous data in React in a more declarative way.","keywords":["async","declarative","fetch","hooks","promise","react","reacthooks","reactjs","utils"],"main":"./lib/index.js","typings":"./lib/index.d.ts","dependencies":{"@types/node":"^11.11.5","@types/react":"^16.8.8"},"devDependencies":{"@babel/core":"^7.4.0","@babel/preset-env":"^7.4.2","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react-dom":"^16.8.3","@typescript-eslint/eslint-plugin":"^1.5.0","@typescript-eslint/parser":"^1.5.0","coveralls":"^3.0.3","eslint":"^5.15.3","eslint-config-prettier":"^4.1.0","eslint-plugin-jest":"^22.4.1","eslint-plugin-react":"^7.12.4","eslint-plugin-react-hooks":"^1.5.1","jest":"^24.5.0","jest-dom":"^3.1.3","react":"^16.8.4","react-dom":"^16.8.4","react-testing-library":"^6.0.2","typescript":"^3.3.4000"},"peerDependencies":{"react":">=16.8.0"},"scripts":{"lint":"eslint . --ext \".ts,.tsx\"","watch":"tsc --watch","test":"jest","coverage":"jest --coverage --coverageReporters=text-lcov | coveralls","build":"tsc"},"author":{"name":"Carlos Gines","email":"carlos.gines.fuster@gmail.com","url":"https://twitter.com/_carlosgines"},"repository":{"type":"git","url":"git+https://github.com/CarlosGines/react-async-utils.git"},"license":"MIT","browserslist":[">0.2%","not dead","not ie <= 11","not op_mini all"],"prettier":{"singleQuote":true,"trailingComma":"all"},"readme":"
\r\n
react-async-utils
\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n
\r\n
\r\n\r\nCollection of utils to work with asynchronous data in React in a more declarative way. Featuring `useAsyncTask` hook, especially useful to fetch data. It is delightful to use with TypeScript, but it can equally be used with JavaScript.\r\n\r\n# Table of Contents\r\n\r\n\r\n\r\n\r\n- [The problem](#the-problem)\r\n- [This solution](#this-solution)\r\n- [Installation](#installation)\r\n- [The new `Async` data concept](#the-new-async-data-concept)\r\n - [The 4 basic states of `Async` data](#the-4-basic-states-of-async-data)\r\n - [useAsyncTask hook](#useasynctask-hook)\r\n - [Auto trigger as an effect](#auto-trigger-as-an-effect)\r\n - [Rendering `Async` data](#rendering-async-data)\r\n - [render](#render)\r\n - [AsyncViewContainer](#asyncviewcontainer)\r\n- [API Reference (WIP)](#api-reference-wip)\r\n - [Hooks](#hooks)\r\n - [`useAsyncTask`](#useasynctask)\r\n- [Contributing](#contributing)\r\n- [LICENSE](#license)\r\n\r\n\r\n\r\n# The problem\r\n\r\nDealing with asynchronous data is usually an imperative process, harder to express in a declarative manner, such as React promotes. It usually results in using a combination of variables/properties to keep track of the possible states:\r\n\r\n```javascript\r\nlet loading;\r\nlet data;\r\nlet error;\r\n// Even more...\r\n...\r\n```\r\n\r\nThis a somehow complex construct for such an ubiquitous case. It can lead to verbose code, even more when dealing with multiple pieces of async data at the same time. Some of these combinations don't even make sense (`loading === true && error !== undefined`?).\r\n\r\nSo, it can feel awkward to follow this pattern. And you probably need to repeat that \"boilerplate\" a lot in your app.\r\n\r\n# This solution\r\n\r\nThe base of this library is \"[making impossible states impossible](https://blog.kentcdodds.com/make-impossible-states-impossible-cf85b97795c1)\" for async data, and building abstractions around it.\r\n\r\nWe do not separate the data itself from its asynchronous state, we consider it an intrinsic part of its nature. And so we put it all together as a new data type consistent with this async nature.\r\n\r\nWe named this data type `Async`.\r\n\r\n```typescript\r\nlet asyncPerson: Async;\r\n```\r\n\r\nIt can be considered the declarative counterpart of a `Promise`.\r\n\r\nThis new data type allows us to create some powerful abstractions, like the `useAsyncTask` custom hook\r\n\r\n```typescript\r\nconst [asyncPerson] = useAsyncTask(getPersonPromise, { triggerAsEffect: true });\r\n```\r\n\r\nwhich we will explain further down.\r\n\r\n# Installation\r\n\r\n```bash\r\nnpm install react-async-utils\r\n```\r\n\r\n# The new `Async` data concept\r\n\r\nWe are going to deal with async data in all of its possible states as a single entity. This entity includes all possible states and related data within it, in an ordered (and type-safe) manner.\r\n\r\n## The 4 basic states of `Async` data\r\n\r\nWe consider any `Async` data can exist in one of this 4 states:\r\n\r\n- **INIT**: nothing has happened yet. This is time 0 of our async process:\r\n\r\n```typescript\r\ninterface InitAsync {\r\n progress: Progress.Init;\r\n}\r\n```\r\n\r\n- **IN PROGRESS**: our async process is happening. We are waiting for its outcome:\r\n\r\n```typescript\r\ninterface InProgressAsync {\r\n progress: Progress.InProgress;\r\n}\r\n```\r\n\r\n- **SUCCESS**: our async process is successfully completed. The actual data will be available in its **payload**:\r\n\r\n```typescript\r\ninterface SuccessAsync {\r\n progress: Progress.Success;\r\n payload: Payload;\r\n}\r\n```\r\n\r\n- **ERROR**: our async process failed. There will be an **error**, the cause of this failure:\r\n\r\n```typescript\r\ninterface ErrorAsync {\r\n progress: Progress.Error;\r\n error: Error;\r\n}\r\n```\r\n\r\nAnd so, an `Async` data encapsulates the 4 states of a piece of data along the async process within a single data type:\r\n\r\n```typescript\r\nexport type Async =\r\n | InitAsync\r\n | InProgressAsync\r\n | SuccessAsync\r\n | ErrorAsync;\r\n```\r\n\r\nThis data type is the base of our library. Take your time to understand it, and we will be able to do great things with it.\r\n\r\n## `useAsyncTask` hook\r\n\r\nA powerful abstraction to manage the whole async process in a declarative way:\r\n\r\n```typescript\r\nconst [asyncPerson, triggerGetPerson] = useAsyncTask(getPersonPromise);\r\n\r\nconst triggerButton = (\r\n \r\n);\r\n```\r\n\r\n- **`getPersonPromise`**: input function that returns a `Promise`.\r\n- **`asyncPerson`**: it is our `Async` data. It will be in the `InitAsync` state at the beginning, but will start getting updated once the async task is triggered.\r\n- **`triggerGetPerson`**: a function that triggers the async task. It will call `getPersonPromise` when invoked, and it will update `asyncPerson` state according to the returned `Promise` state.\r\n\r\nYou can call `triggerGetPerson` whenever you need it.\r\n\r\n### Auto trigger as an effect\r\n\r\nYou can also trigger the async task automatically as an effect, providing the `triggerAsEffect` option as `true`:\r\n\r\n```typescript\r\nconst [asyncPerson] = useAsyncTask(getPersonPromise, { triggerAsEffect: true });\r\n```\r\n\r\n⚠️ Be careful, since using `triggerAsEffect` option can cause infinite loops if not handed carefully. Input functions of `useAsyncTask` hook (like `getPersonPromise` here) will become dependencies of the effect. You want to use `useCallback` if needed with them to prevent these loops.\r\n\r\n\r\n\r\nOf course you can use both _triggerAsEffect_ option and the returned _triggerAsyncTask_ function at the same time.\r\n\r\n## Rendering `Async` data\r\n\r\n### render\r\n\r\nA good option is the `render` helper method. You can provide a render method per state. The corresponding one will be used:\r\n\r\n```tsx\r\nimport { render } from 'react-async-utls';\r\n\r\nrender(asyncPerson, {\r\n init: () =>
Init state render. Nothing happened yet.
,\r\n inProgress: () => (\r\n
In Progress state render. We are fetching our Person.
\r\n ),\r\n success: person => (\r\n
Successful state render. Please welcome {person.name}!
\r\n ),\r\n error: error => (\r\n
Error state render. Something went wrong: {error.message}
\r\n ),\r\n});\r\n```\r\n\r\n### AsyncViewContainer\r\n\r\nAnother option is the `AsyncViewContainer` component:\r\n\r\n```tsx\r\nimport { AsyncViewContainer, getPayload } from 'react-async-utls';\r\n\r\nfunction MyComponent({ asyncPerson }) {\r\n person = getPayload(asyncPerson);\r\n return (\r\n 'Loading person...'}\r\n errorRender={error => `Something went wrong: ${error.message}`}\r\n >\r\n {person ? : 'No Data'}\r\n \r\n );\r\n}\r\n```\r\n\r\nApart from its children, it will render the render method corresponding to the `Async` data state.\r\n\r\nBONUS: `AsyncViewContainer` accepts an array at the `asyncData` prop :\r\n\r\n```tsx\r\nfunction MyComponent({ asyncPerson }) {\r\n return (\r\n 'Loading stuff...'}\r\n errorRender={errors => errors.map(error => error.message).join(' AND ')}\r\n >\r\n // ...\r\n \r\n );\r\n}\r\n```\r\n\r\nIt will render the corresponding render method if _any_ `Async` data is on that state.\r\n\r\n# API Reference (WIP)\r\n\r\nWork in progress.\r\n\r\n## Hooks\r\n\r\n### `useAsyncTask`\r\n\r\n```typescript\r\nfunction useAsyncTask(\r\n getData: (singal?: AbortSignal) => Promise,\r\n {\r\n triggerAsEffect,\r\n onSuccess,\r\n onError,\r\n }: {\r\n triggerAsEffect?: boolean;\r\n onSuccess?: (payload: Payload) => void;\r\n onError?: (error: Error) => void;\r\n },\r\n): [Async, () => Promise>, () => void];\r\n```\r\n\r\nThis hook is suitable for handling any kind of async tasks, like fetching data or submitting forms. It takes care of race conditions and clean up on component unmount.\r\n\r\n- **@param `getData`**\r\n\r\n _**You want to perform your fetch here**_. This input function is the async task that will be carried out.\r\n\r\n It can use the `AbortSignal` that the hook provides (when browser supports it) if you want to make your task [abortable](https://developers.google.com/web/updates/2017/09/abortable-fetch).\r\n\r\n- **@param `options.triggerAsEffect`**\r\n\r\n If true, your task will be as an effect. It will actually be run inside a `useEffect` hook.\r\n\r\n ⚠️ Be careful, since all input functions (`getData`, `onSuccess`, `onError`) will become dependencies of the effect. You can create infinite loops if you do not hand them carefully. Wrap the input functions in `useCallback` if needed to prevent these infinite loops.\r\n\r\n- **@param `options.onSuccess`**\r\n\r\n Callback function that will be called when the task reaches the success state.\r\n\r\n- **@param `options.onError`**\r\n\r\n Callback function that will be called when the task reaches the error state.\r\n\r\n- **@returns**\r\n\r\n A tuple with 3 values:\r\n\r\n 1. **The `Async` data** corresponding to the current task state.\r\n 2. **A _triggerAsyncTask_ function** that can be used to imperatively trigger the task (i.e. from a \"Submit\" or \"Refresh\" button). It returns a `Promise` of the resulting `Async` data. You generally won't use this `Async` data —which is a escape hatch for some imperative cases—, but the previous one —which is more declarative—.\r\n 3. **A _resetAsyncTask_ function** that can be used to reset the task back to the init state, aborting it if it was in progress.\r\n\r\n# Contributing\r\n\r\nThis is my first OSS. Open to contributions and willing to learn!\r\n\r\n# LICENSE\r\n\r\nMIT\r\n","readmeFilename":"README.md","gitHead":"5771dfe3f16bd9bd4e522df5c426a240a344920e","bugs":{"url":"https://github.com/CarlosGines/react-async-utils/issues"},"homepage":"https://github.com/CarlosGines/react-async-utils#readme","_id":"react-async-utils@0.12.0-alpha.0","_nodeVersion":"10.14.2","_npmVersion":"6.9.0","dist":{"integrity":"sha512-g3mmmHySHC+b6hXzIOhWscpDskgAa+BvtPx3HrYVWfugIkAr3yLkS9FMpwFksCM8bhsDVrDJl9NmpVzbkk9UVQ==","shasum":"4a539e6fda50d31cacc805dbe42ce40c5fcef79c","tarball":"https://registry.npmjs.org/react-async-utils/-/react-async-utils-0.12.0-alpha.0.tgz","fileCount":32,"unpackedSize":51762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcm1sTCRA9TVsSAnZWagAAqakP/RPVVand9Uyv9kyWzXkw\nyCvf0lmeUF4SWu6t41I5sEOn5o9vshSMcIXq2oju4CofvPqJv5rp++4t9Coo\naZowEG+tv2W6YxMA9dNGz2AXdGm++eBPdKeizHsfE72yotT4Sbnp39JA1uvf\nishVQGFTvZusxSqu5Vd4uCpVNRRjWer+LitOrx0k4by3bzl922YJ+g+L1E1W\ntEnlTn0DPsu+JvMjhcZxVRDvzWkDVksaOs82BCuhwL/ZEALHgc39YWTKsUOR\nUA8jA/JwNjogIGUWE2fddfLLeyfl3zW+azqcLST50UUdbgCYvaNAUMQ2Q7bb\npmqQYWr9GC+QWRKUWPT2XMy7E+f33N/m/NacZys/3p4+y9egmyZiWNoW5YoF\ndc13NYclckCWG9dYBl3u4LCiGTX4kZj+nOhRoECTT9VnnA8Qq/CJoe1KMoGo\not/7LB0UVzGKVNi5LQMwhUhv2oAzGnPbsEJPNM+NnyU8wwsUZ6TFBGQem1tu\n6PAcn+VzltZR9rd6U5wY4IkOl9tN0M9s1pfenOS9IUsCaaTVLhSB8Dpm626K\nZVj2Jx2uujnWO0mXioc4Zf4voCYhoCJalOZoJ7kqhGMND9z5fiasv90ASZkw\n+ItJWtaAVLcAkVx0dYV2xEfgsLpvVCiepyXGFBg8g0hnC27fRW9FtcVgIwrV\n651W\r\n=MZzT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfEpdjS1vPoQ2G2HbJUgIdDLkOLFYOHoj97hVgjN1BjQIgSuK3tKkC+mQpYWkYwnl4V1cfzNmtVVa/IXCpBUGH5Ns="}]},"maintainers":[{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"}],"_npmUser":{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-async-utils_0.12.0-alpha.0_1553685266860_0.4463516380807413"},"_hasShrinkwrap":false},"0.12.0":{"name":"react-async-utils","version":"0.12.0","description":"Collection of utils to work with asynchronous data and asynchronous tasks in React in a more declarative way.","keywords":["async","declarative","fetch","hooks","promise","react","reacthooks","reactjs","utils"],"main":"./lib/index.js","typings":"./lib/index.d.ts","dependencies":{"@types/node":"^11.12.1","@types/react":"^16.8.10"},"devDependencies":{"@babel/core":"^7.4.0","@babel/preset-env":"^7.4.2","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/jest":"^24.0.11","@types/react-dom":"^16.8.3","@typescript-eslint/eslint-plugin":"^1.5.0","@typescript-eslint/parser":"^1.5.0","coveralls":"^3.0.3","eslint":"^5.16.0","eslint-config-prettier":"^4.1.0","eslint-plugin-jest":"^22.4.1","eslint-plugin-react":"^7.12.4","eslint-plugin-react-hooks":"^1.6.0","jest":"^24.5.0","jest-dom":"^3.1.3","react":"^16.8.6","react-dom":"^16.8.6","react-testing-library":"^6.0.3","typescript":"3.4.1"},"peerDependencies":{"react":">=16.8.0"},"scripts":{"lint":"eslint . --ext \".ts,.tsx\"","watch":"tsc --watch","test":"jest","coverage":"jest --coverage --coverageReporters=text-lcov | coveralls","build":"tsc"},"author":{"name":"Carlos Gines","email":"carlos.gines.fuster@gmail.com","url":"https://twitter.com/_carlosgines"},"repository":{"type":"git","url":"git+https://github.com/CarlosGines/react-async-utils.git"},"license":"MIT","browserslist":[">0.2%","not dead","not ie <= 11","not op_mini all"],"prettier":{"singleQuote":true,"trailingComma":"all"},"gitHead":"646b8c740c5d4a66c30647cf515b72a4ec035150","bugs":{"url":"https://github.com/CarlosGines/react-async-utils/issues"},"homepage":"https://github.com/CarlosGines/react-async-utils#readme","_id":"react-async-utils@0.12.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"},"dist":{"integrity":"sha512-HgZ9QhfH42N7MdSwUFFAwoLokGA6AMe7tWd18Dgd7360J3Ri3aowiaEwvbyKipNQJpE2La0a84/R/qxaFNqV5w==","shasum":"e4dc76f89d802ad88a1155f9e84ddf00174d8460","tarball":"https://registry.npmjs.org/react-async-utils/-/react-async-utils-0.12.0.tgz","fileCount":33,"unpackedSize":55228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcoLSHCRA9TVsSAnZWagAAKdwP/3EsL6fcyMzwE2X8Phkg\nDc3ruxjAGpFBz193bghXu1tbCDyiywE+80m0Byf3ND69poFETwv9PcnKy3b8\nOLfr7+SujsM/fD4s8BY+Hc8QMMgsyRerIBdSsBJFKviSPcLLry+duaq3UElM\nIydsXzoncaapCQeZqTKaPhesPL7fsug1OkMMOLfA91eTmEfRaUxi2tUh5WE0\nrV3ksnkk8jMaYz5NYM0pls8yyfV/hddNC4xAA8pH/8tD4+o3DPJXOmM9yLFB\n87prcOLWR3KSf6cBJiNAaGfQKL2S0JOoSGFLPZplGOBXDaUtxux4+0OodSB0\na8S/mTtic/O+wvSIfNVLIwrpBJDEsPfYTgPtl9GTP/sKrAMdYw4xAvaX06b2\nhWS/yHeXH8E8aUQ80sFTlOVsERee8x1jLWqKKW+IqyW5WqJm5VIsnrowC3OX\nWhvhs/XIZBAqpUb9VmqcRIL+edGJ1L/cup6lwCfMStOWMijXIyKkUld2cdMT\nqcvQPOu/4H+z5jD1igxAk7frZwSDQs5lukCJ4MnpCTvF853mzMZp3fwJrtn7\nhH6lpjYHUKKHfSRXo6d0bOWStsXatcu8rTHYNWbgaIOncNJ1bforL4y5GRgq\nCQbfm14l7+jj2sIfiYKn746hL2XgbJxtrOrKcCNjAIroS4xyPXWgFhIyNnhs\nd7Sr\r\n=F+Yz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBqR/lUHxdz4bqSyuReeO1tYL9rs+q8Jx14nNZT6zgO7AiEA41FmLI0Ock/AU4heNBJv0zStHi752GWV1WymRgGoT3g="}]},"maintainers":[{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-async-utils_0.12.0_1554035847102_0.7967842556393394"},"_hasShrinkwrap":false},"0.12.1":{"name":"react-async-utils","version":"0.12.1","description":"Collection of utils to work with asynchronous data and asynchronous tasks in React in a more declarative way.","keywords":["async","declarative","fetch","hooks","promise","react","reacthooks","reactjs","utils"],"main":"./lib/index.js","typings":"./lib/index.d.ts","dependencies":{"@types/node":"^11.12.1","@types/react":"^16.8.10"},"devDependencies":{"@babel/core":"^7.4.0","@babel/preset-env":"^7.4.2","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/jest":"^24.0.11","@types/react-dom":"^16.8.3","@typescript-eslint/eslint-plugin":"^1.5.0","@typescript-eslint/parser":"^1.5.0","coveralls":"^3.0.3","eslint":"^5.16.0","eslint-config-prettier":"^4.1.0","eslint-plugin-jest":"^22.4.1","eslint-plugin-react":"^7.12.4","eslint-plugin-react-hooks":"^1.6.0","jest":"^24.5.0","jest-dom":"^3.1.3","react":"^16.8.6","react-dom":"^16.8.6","react-testing-library":"^6.0.3","typescript":"3.4.1"},"peerDependencies":{"react":">=16.8.0"},"scripts":{"lint":"eslint . --ext \".ts,.tsx\"","watch":"tsc --watch","test":"jest","coverage":"jest --coverage --coverageReporters=text-lcov | coveralls","build":"tsc"},"author":{"name":"Carlos Gines","email":"carlos.gines.fuster@gmail.com","url":"https://twitter.com/_carlosgines"},"repository":{"type":"git","url":"git+https://github.com/CarlosGines/react-async-utils.git"},"license":"MIT","browserslist":[">0.2%","not dead","not ie <= 11","not op_mini all"],"prettier":{"singleQuote":true,"trailingComma":"all"},"gitHead":"afc83d81ac6aa0f2bea1daa2a861173be129db1a","bugs":{"url":"https://github.com/CarlosGines/react-async-utils/issues"},"homepage":"https://github.com/CarlosGines/react-async-utils#readme","_id":"react-async-utils@0.12.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"},"dist":{"integrity":"sha512-AdJMmm1g1ZX/im71CVJshgCHhVTPSoIQAWt/LYNz7Aw15AZVntimLekLCKE4poEtzAW6F1AkPnIuZbyEsrgEjA==","shasum":"a4949f57fca73ff8a5c4e0792a4ff8b8a154b309","tarball":"https://registry.npmjs.org/react-async-utils/-/react-async-utils-0.12.1.tgz","fileCount":33,"unpackedSize":55341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcoLfNCRA9TVsSAnZWagAAGYUP/2qEccopF/U97sw7DGMc\nl5SfJRgSR6a+D3vGRnjMeCDIQ7SWvPVkyVYTl8n5u5w2xbelKYEZEKctrqa2\naRyvAJOnolgCoWaARqyMSxLH2DKqWShDRqAdqCjLlIfhtObrecAxaE0BdB4U\ndcGSL7JHpn6lkI2poVtOxmfyBMOmGOyHkotXvJprxtIhuQb8RsF3AjwnPLGn\ngDTkPVV9X6TlICcheFfYNg3PWV44VlEfPNAXsDBtkbN92gM/z/zyrADnvZ25\nNHjpJBH2qlkcKiCQVyd/XN8Q1oAuC6SKVFY3L7W6azDGkP8WKqJzB9uD4p13\nyAGzcWoHqMZbzHIe9eAkr1zy0ODDk8Q9RUG399CsgyIWM40ffmlyw/5zSYuD\nYCFrJ+A5oCEjnuaWqmMRUzxeWbx0FtPqxM7GhAOv0nvJ6iRDC73w2M2IYhOp\nVovAs2qS0Z0O57lxXn30YO3PDkpj1EKjFTokepBOHtypnExwyVIQORKrmhIE\n/mGqG+jz4F3vvyVX6ya1gBe69jOhVEWKDzpfPUYQM82QxN8E3FY0dPPseow8\nh7N8hv+oWtTsjo5LAWTO6U8U1w21evBnpTj/5+W2JsKMDDhY51IJ6pWWZWwt\nI0x1QkSytKCsOOvTGkwgBy3hUs6YFsZ2TP0ldEm5X3APovSKxMl7YeUCrh4o\nmtFK\r\n=PGv3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGDPeh1zLzX2j8RJs9AYF/f3edV3iWVi3hJ9qN29xOk8AiAo9GUSH97jyPhVWdlr0YYvfkrN9S/ppYHeilhAMvUDng=="}]},"maintainers":[{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-async-utils_0.12.1_1554036684026_0.40890319125764574"},"_hasShrinkwrap":false},"0.13.0":{"name":"react-async-utils","version":"0.13.0","description":"Collection of utils to work with asynchronous data and asynchronous tasks in React in a more declarative way.","keywords":["async","declarative","fetch","hooks","promise","react","reacthooks","reactjs","utils"],"main":"./lib/index.js","typings":"./lib/index.d.ts","dependencies":{"@types/node":"^11.12.1","@types/react":"^16.8.10"},"devDependencies":{"@babel/core":"^7.4.3","@babel/preset-env":"^7.4.3","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/jest":"^24.0.11","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^1.7.0","@typescript-eslint/parser":"^1.7.0","coveralls":"^3.0.3","eslint":"^5.16.0","eslint-config-prettier":"^4.1.0","eslint-plugin-jest":"^22.4.1","eslint-plugin-react":"^7.12.4","eslint-plugin-react-hooks":"^1.6.0","jest":"^24.7.1","jest-dom":"^3.1.3","react":"^16.8.6","react-dom":"^16.8.6","react-testing-library":"^6.1.2","typescript":"3.4.5"},"peerDependencies":{"react":">=16.8.0"},"scripts":{"lint":"eslint . --ext \".ts,.tsx\"","watch":"tsc --watch","test":"jest","coverage":"jest --coverage --coverageReporters=text-lcov | coveralls","build":"tsc"},"author":{"name":"Carlos Gines","email":"carlos.gines.fuster@gmail.com","url":"https://twitter.com/_carlosgines"},"repository":{"type":"git","url":"git+https://github.com/CarlosGines/react-async-utils.git"},"license":"MIT","browserslist":[">0.2%","not dead","not ie <= 11","not op_mini all"],"prettier":{"singleQuote":true,"trailingComma":"all"},"gitHead":"645a0d83a9c840f12d908302acfeb842fc8c0840","bugs":{"url":"https://github.com/CarlosGines/react-async-utils/issues"},"homepage":"https://github.com/CarlosGines/react-async-utils#readme","_id":"react-async-utils@0.13.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"},"dist":{"integrity":"sha512-f97WQZf92PyIK8k0pQED/a1zBrbOAncbUIzjZwb7roSMiaT2KEfimP2PbUtSxD9+V+/OSfR3hjW3DjV575X9sw==","shasum":"55885f4d1a24d4da7a81f5c94afaa110b6b62fe9","tarball":"https://registry.npmjs.org/react-async-utils/-/react-async-utils-0.13.0.tgz","fileCount":37,"unpackedSize":62989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcwPsoCRA9TVsSAnZWagAA9j0QAIZc6/l0Up2uaxuf87vy\nJYawzTahDknrbva3bym2wpnm0T//6qi+HQgJHszGzbbQR4YN4bXX/ysGNAj3\ngNk1JJ8v71O7mqLSgSItQg7kjUUHUMsA3xi+0YDtsT5CnwrcxGe1nHKS9FMM\nsDx/XgXTDwjzfBpagZXPiIh4FkDFGIGJihEPCfPPUb7Um+ucA5p/BJwwyA7R\nkF77lY/qk10u55lQYphTtTWi6NTM8689NOBj0SB50ipQAIMGrQ5aYKDn6dpX\nuR+yKYcMR/3APRnNKx5Ont/IAATOD6SUJ1vyv+SJC6WCX6VV+bYqeMniv4j/\nv+ZNeVTkLFGuWwwy0oqLoj9cUjX79wBqehwpMnk/PtpiFZ2oC5YLcn9UJ6UR\nq3BhGVo30JAWbErPtxpCoXXtyQ2UwfIPX6b2ydBoUOaWPG+U+CkTm5MdJo6V\nyKHKGhpJSUVSmwOKeIF+sHpN+49kcuure+CpMGi5zkjdj2LeoZgdgyksKv6m\n43k9m5qDgZKrvQDXTTNvRK9yaeUviIr331FXQs1KzasSY+6Zigjg8weOPHuw\nRvR5mjbdYDEoHyYtwjwLldoRXRDL6/pULR92jeacmBtfG3C3Bfdt2RXidYOF\nrw59RiMZnmLBZHoIU8qNkxtKfFsk9WBUzSi03ouKvZ5Nznbf9S/POEFaQy6n\nlPeE\r\n=81lB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFcakP0D8CMLRGhbxHMsle2kqO+sF+YQZnEzA4/pD/WRAiEA4QTZpIYUwbjfp5Pj/cRURbF1U/HOt9C0WmEpAkuH6+A="}]},"maintainers":[{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-async-utils_0.13.0_1556151078295_0.7608812669541243"},"_hasShrinkwrap":false},"0.13.1":{"name":"react-async-utils","version":"0.13.1","description":"Collection of utils to work with asynchronous data and asynchronous tasks in React in a more declarative way.","keywords":["async","concurrentmode","declarative","fetch","hooks","promise","react","reacthooks","reactjs","suspense","utils"],"main":"./lib/index.js","typings":"./lib/index.d.ts","dependencies":{"@types/node":"^11.12.1","@types/react":"^16.8.10"},"devDependencies":{"@babel/core":"^7.4.4","@babel/preset-env":"^7.4.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/jest":"^24.0.12","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^1.7.0","@typescript-eslint/parser":"^1.7.0","coveralls":"^3.0.3","eslint":"^5.16.0","eslint-config-prettier":"^4.2.0","eslint-plugin-jest":"^22.5.1","eslint-plugin-react":"^7.13.0","eslint-plugin-react-hooks":"^1.6.0","jest":"^24.7.1","jest-dom":"^3.1.4","react":"^16.8.6","react-dom":"^16.8.6","react-testing-library":"^6.1.2","typescript":"3.4.5"},"peerDependencies":{"react":">=16.8.0"},"scripts":{"lint":"eslint . --ext \".ts,.tsx\"","watch":"tsc --watch","test":"jest","coverage":"jest --coverage --coverageReporters=text-lcov | coveralls","build":"tsc"},"author":{"name":"Carlos Gines","email":"carlos.gines.fuster@gmail.com","url":"https://twitter.com/_carlosgines"},"repository":{"type":"git","url":"git+https://github.com/CarlosGines/react-async-utils.git"},"license":"MIT","browserslist":[">0.2%","not dead","not ie <= 11","not op_mini all"],"prettier":{"singleQuote":true,"trailingComma":"all"},"gitHead":"33dbb5fcee9fe63b5959603e8c155162363f07f8","bugs":{"url":"https://github.com/CarlosGines/react-async-utils/issues"},"homepage":"https://github.com/CarlosGines/react-async-utils#readme","_id":"react-async-utils@0.13.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"},"dist":{"integrity":"sha512-A9oerFNQPu+FeZjl1lPdeoBxPmMiLvkbnF8iX3SidjLYS+5JGnI8Oqztvdn7kVen5hs+KzXuaa/fRhyANPT98Q==","shasum":"2f1540386c0019dab7115136945a5fd9a638a2c9","tarball":"https://registry.npmjs.org/react-async-utils/-/react-async-utils-0.13.1.tgz","fileCount":37,"unpackedSize":63510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJczHieCRA9TVsSAnZWagAAfHMP/0GsFxMQ/wb2biLanzI6\n9Qk5qu0nixeuwaOBVQHKnftPhaafjdmzKy+sj9hWl3g26BnDrJTaEsBQfzYi\nJgd7+Z2zR6Z/QxnIXMtbpPXH2itBgB8yRk1ME7TDIO7tSTCzGrgWo/0GupAX\nbYD51c0WA7e5elekvpDX6cg3kjFHKig21Xrm0MJ1f1emkN6J1QzpHcXMSzBj\ncbfkV2VCu1lfB1O8rpU2eqt2oDxXYkIVq+ybvqm5Z3E3CSTbodhunT1of8Ja\nGdW6OSvyI4zKuV6kR/44Q7MI0htoPCyysn/XMfoqIyHnhe9A57nPKst+SCLH\n6kJGKDZVm4AN0z3P4uKkwDv5FiPvIYmOFLiqyQZXfSpgO5OFZ+QmS1i4n0Gn\nhbDiyTSvQAB+UeGOZjdoYW0hJFq2AhL6brZj334BAKF705oE6L3Y+DcbMT6q\nDe1egbc5jizU6zsxd38pFgBIM6inxMy/Vk6CjXGv9gMqerZ9UdDf2L3tVxPO\nV03zI788GloELllhlT+LoU3+dtGYlXtMixfd4jo68oKVvG+Ol9Ukg2Ff0IH6\n59q03JBIdOTYq3YDhK4QjvnSslXeltmwhJmAR1aOC5aGQTUVJg6m5R4dLu92\nK/QKacoTfOnhdV/PIbDrE8qIcsY6cqjLGbQTduFZUe/QXODRsr4sExtBFwnw\nBPV0\r\n=ZA/n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEHinwaAXN1gh7k79bhmdnC5urEObFhfnbR8Z7zKHIuyAiEAp7nU+UWi03B9o7ToD8M/QMeNHgKrbA2lHr6rVn7YUCU="}]},"maintainers":[{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-async-utils_0.13.1_1556904093553_0.8349037205378889"},"_hasShrinkwrap":false},"0.13.2":{"name":"react-async-utils","version":"0.13.2","description":"Collection of utils to work with asynchronous data and asynchronous tasks in React in a more declarative way.","keywords":["async","concurrentmode","declarative","fetch","hooks","promise","react","reacthooks","reactjs","suspense","utils"],"main":"./lib/index.js","typings":"./lib/index.d.ts","dependencies":{"@types/node":"^11.12.1","@types/react":"^16.8.10"},"devDependencies":{"@babel/core":"^7.4.4","@babel/preset-env":"^7.4.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/jest":"^24.0.12","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^1.7.0","@typescript-eslint/parser":"^1.7.0","coveralls":"^3.0.3","eslint":"^5.16.0","eslint-config-prettier":"^4.2.0","eslint-plugin-jest":"^22.5.1","eslint-plugin-react":"^7.13.0","eslint-plugin-react-hooks":"^1.6.0","jest":"^24.7.1","jest-dom":"^3.1.4","react":"^16.8.6","react-dom":"^16.8.6","react-testing-library":"^6.1.2","typescript":"3.4.5"},"peerDependencies":{"react":">=16.8.0"},"scripts":{"lint":"eslint . --ext \".ts,.tsx\"","watch":"tsc --watch","test":"jest","coverage":"jest --coverage --coverageReporters=text-lcov | coveralls","build":"tsc"},"author":{"name":"Carlos Gines","email":"carlos.gines.fuster@gmail.com","url":"https://twitter.com/_carlosgines"},"repository":{"type":"git","url":"git+https://github.com/CarlosGines/react-async-utils.git"},"license":"MIT","browserslist":[">0.2%","not dead","not ie <= 11","not op_mini all"],"prettier":{"singleQuote":true,"trailingComma":"all"},"gitHead":"cc6ddb16464016394100e91545a9a47667a395ca","bugs":{"url":"https://github.com/CarlosGines/react-async-utils/issues"},"homepage":"https://github.com/CarlosGines/react-async-utils#readme","_id":"react-async-utils@0.13.2","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"},"dist":{"integrity":"sha512-GFrJ3tiIxAHd+KXGfs/ZNFbITX/kpwkWLmENFH1+AWLSV5yXdsVKvJKTgoH8mfZpCM3EsfPqEEyszWlbb0tWWQ==","shasum":"b2385fd23cd028402dbef9c8b1b5b4d295fb6dcc","tarball":"https://registry.npmjs.org/react-async-utils/-/react-async-utils-0.13.2.tgz","fileCount":37,"unpackedSize":63766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJczIIsCRA9TVsSAnZWagAA6CkP/1RaR0o8zgz87I4JzVNf\nVywtVpAkYv0bTfK9eNeRaofU6S9ttjcTrfGuThU7ivWG3rR1POyGNS8JgoTu\nUAuc3iw46p69kjlFx+2jNWteM8trk/4fxSOGzvI2+ZCvnptm//vspk5nyarj\nDjoTntHtNoCEcbgEhV5nOfe4mRRXlunr6PfZr1fbQ9UZJZWf8Eh3K9n0Zx6U\n601GSkz9oS9BSaL64l+jeZlbOmG9TeJ/5GXUJnN5TcdMEteZFfvh1EnYb8Q8\nHtvMkI3Nfd7oJpwiyK6qV1lrRVd6WXPjUHypuK5S9tPSNgbqOz2T4guGpEv2\nQQs2cxliYGHgfiL18KCgRl15B7iTaym7pZKZsc0mBnK64Q+jvgt/v1dyWzSt\nWF88jVtooHhZkv09IH5qpv4cqlGLERJW6CU9pM/i0G+2QTpJGU9JXC6Z4C3e\niWZaZ9+51rn2YGzdpSbLiUO3JxPBfM/emuKQAplmuEN4jhvL8VXhgM8iHfLC\nq3kM1Trvsqu736QOb72p8vxSXyYM1lZGAgCWB+1kKpUKgFRJIREeo6hLBJ2R\nMlNlFJvwGFnT/Wy5h2L/JO7vfU74nBdRMuQSXy4y6RubRZv/jm6dPFGr0lM1\n0bZ3nYDOqoAyPFUMcvSFSPLrSo25Qw7h1JhjIcXGbnz+/pZWGi0/M+ZxJ8PM\nmmyW\r\n=TUh2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNdyvDT2mf1kjpF2InZ7P48IfEr9Go9jMdnZ56GD1yyQIgHKrWyvzsfZVZFSTSHAcAno1MHA7Zn41cqIE684J3wHI="}]},"maintainers":[{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-async-utils_0.13.2_1556906539668_0.09364756996425672"},"_hasShrinkwrap":false},"0.13.3":{"name":"react-async-utils","version":"0.13.3","description":"Collection of utils to work with asynchronous data and asynchronous tasks in React in a more declarative way.","keywords":["async","concurrentmode","declarative","fetch","hooks","promise","react","reacthooks","reactjs","suspense","utils"],"main":"./lib/index.js","typings":"./lib/index.d.ts","dependencies":{"@types/node":"^11.15.0","@types/react":"^16.9.11"},"devDependencies":{"@babel/core":"^7.6.4","@babel/preset-env":"^7.6.3","@babel/preset-react":"^7.6.3","@babel/preset-typescript":"^7.6.0","@testing-library/jest-dom":"^4.2.0","@testing-library/react":"^8.0.1","@types/jest":"^24.0.20","@types/react-dom":"^16.9.3","@typescript-eslint/eslint-plugin":"^1.13.0","@typescript-eslint/parser":"^1.13.0","coveralls":"^3.0.7","eslint":"^5.16.0","eslint-config-prettier":"^4.3.0","eslint-plugin-jest":"^22.21.0","eslint-plugin-react":"^7.16.0","eslint-plugin-react-hooks":"^1.7.0","jest":"^24.9.0","react":"^16.11.0","react-dom":"^16.11.0","typescript":"~3.4.5"},"peerDependencies":{"react":">=16.8.0"},"scripts":{"lint":"eslint . --ext \".ts,.tsx\"","watch":"tsc --watch","test":"jest","coverage":"jest --coverage --coverageReporters=text-lcov | coveralls","build":"tsc"},"author":{"name":"Carlos Gines","email":"carlos.gines.fuster@gmail.com","url":"https://twitter.com/_carlosgines"},"repository":{"type":"git","url":"git+https://github.com/CarlosGines/react-async-utils.git"},"license":"MIT","browserslist":[">0.2%","not dead","not ie <= 11","not op_mini all"],"prettier":{"singleQuote":true,"trailingComma":"all"},"gitHead":"36cb78d1d85ef8a7cfa43c213555652d6120f859","bugs":{"url":"https://github.com/CarlosGines/react-async-utils/issues"},"homepage":"https://github.com/CarlosGines/react-async-utils#readme","_id":"react-async-utils@0.13.3","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-KLoASnEYLCAxC9jMSeEgXi1DRBMonISjfdNphfAaGFk1MZTw9Y4I77t0ADQaBCT8gFEOBsn0YLW42hwR/7aOyA==","shasum":"fd59904ad203e40b98b9468d417ba8e3fa1686ea","tarball":"https://registry.npmjs.org/react-async-utils/-/react-async-utils-0.13.3.tgz","fileCount":38,"unpackedSize":63941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt2HGCRA9TVsSAnZWagAAb7IP/ikaXeZ0RTiT7Y3P6x5i\njIUmHYXByTMEoO6ZLCeu1LhbadnppsVUSH8hZU+aopjvUPQyMrsvVLZrSTiQ\nMfpXeNW+v0wVZQ5zsyqviYszBVh+SB0QzqpNS+vF5WoWawixKCyMW9Y9VAYN\nRsJtm9NhT2bV5UbiUnDoL//PIO50T/UPi4kD5QyTuJQy6Yz1HxX7GLWTu7UI\nTetJHtmKCE6vVp9qvdkrdgD9AUDI9j58pKXJm/Ap+N+ogqvvxS9WvupWAxQ1\no9AktMHpNA7ZeKSq+Q316CqtFlSoHiRatvHTRlZCOUIP+E+ylNJQEZsPyVVr\nvsKJMiShS3FX5bt3qwOyvCySXPL8T8RbuJL4Ux2B5Z2KE7An/JYCWwjzFgUB\nmx+/CPi6hVgQGP7iAeOyBdwqLQHOm5337SUmDcf49TvXQoTINaANb6Dr+xv7\nPsli7hFR+1zE04+VNM/mM7+u7xNhfkUJ1+P5N0xl7Vd/AFSziEO51n/4cU9J\n9zGX742+jkLH5ij3y0Vm1k6YQn6wVd+Mb8oBERI+ztjG9yiJQRLMBOJsjTm2\nKK2M9OleBSrd4EvymlvQJ3AafEN1LyoIojyWzRdZIdShbol/qGJiJPQE7zWM\n7tQ8weTO33CuVE4oL/ULYjOCWWXpohVfRDQM2AFnNSKTZlLYVFp23zX87cMm\ntTuK\r\n=iDnR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyBUw9uM8jBQKACXxS9znrhty7aiGVya/7YMQEkHWpJAIhAJqeN+nlggdA2z+CIK0OtZaNzRnTocWV8QPt88Mn9A6M"}]},"maintainers":[{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"}],"_npmUser":{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-async-utils_0.13.3_1572299206358_0.7525222444249817"},"_hasShrinkwrap":false},"0.14.0":{"name":"react-async-utils","version":"0.14.0","description":"Collection of utils to work with asynchronous data and asynchronous tasks in React in a more declarative way.","keywords":["async","concurrentmode","declarative","fetch","hooks","promise","react","reacthooks","reactjs","suspense","utils"],"main":"./lib/index.js","typings":"./lib/index.d.ts","dependencies":{"@types/node":"^12.11.7","@types/react":"^16.9.11"},"devDependencies":{"@babel/core":"^7.6.4","@babel/preset-env":"^7.6.3","@babel/preset-react":"^7.6.3","@babel/preset-typescript":"^7.6.0","@testing-library/jest-dom":"^4.2.0","@testing-library/react":"^9.3.0","@types/jest":"^24.0.20","@types/react-dom":"^16.9.3","@typescript-eslint/eslint-plugin":"^2.6.0","@typescript-eslint/parser":"^2.6.0","babel-eslint":"^10.0.3","coveralls":"^3.0.7","eslint":"^6.6.0","eslint-config-prettier":"^6.5.0","eslint-config-react-app":"^5.0.2","eslint-plugin-flowtype":"^3.13.0","eslint-plugin-import":"^2.18.2","eslint-plugin-jest":"^23.0.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.16.0","eslint-plugin-react-hooks":"^1.7.0","jest":"^24.9.0","react":"^16.11.0","react-dom":"^16.11.0","typescript":"~3.6.4"},"peerDependencies":{"react":">=16.8.0"},"scripts":{"lint":"eslint . --ext \".ts,.tsx\"","watch":"tsc --watch","test":"jest","coverage":"jest --coverage --coverageReporters=text-lcov | coveralls","build":"tsc"},"author":{"name":"Carlos Gines","email":"carlos.gines.fuster@gmail.com","url":"https://twitter.com/_carlosgines"},"repository":{"type":"git","url":"git+https://github.com/CarlosGines/react-async-utils.git"},"license":"MIT","browserslist":[">0.2%","not dead","not ie <= 11","not op_mini all"],"prettier":{"singleQuote":true,"trailingComma":"all"},"gitHead":"011e0cf625bda0d922c452525b53a53a9bb84be8","bugs":{"url":"https://github.com/CarlosGines/react-async-utils/issues"},"homepage":"https://github.com/CarlosGines/react-async-utils#readme","_id":"react-async-utils@0.14.0","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-jovvE0kIaIfmtii4y7CNMA9i7l2btqhfOtoV1RbcrowrUe12az16wqCbXD5m4ffYhR4p5OnHVqQxpIMKvrNMrA==","shasum":"0435b5626d11de7b98ceab47a2fbc21e8b9a1de5","tarball":"https://registry.npmjs.org/react-async-utils/-/react-async-utils-0.14.0.tgz","fileCount":40,"unpackedSize":71334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt36wCRA9TVsSAnZWagAAwnQP/jjF4oSs8+2fx5qt698U\nzXOZwEjWaFGjsPL8udz4iIt68xeAMkrGLEkeWwnSwoQZSNPq0RUwdF7SFlO3\nv/eGDpevU69MeM9DiESjY0H4Qk+TbE43KYl5uFFkpdHhaO7cHn1xGk53KPqJ\niEYiuG/hGGw3j/cQmHU6Hqr7ucmV0u90vgCqS4xfr5vqSpHTqmbfMHKRmcBL\nsXXgrStcZ5yxbgLSoFADzfCqb1Mqr41/E2KEDHEYIChPPF994gkr9rpt/vVM\novy+Z7pdnHJoC1GSwoQbZfsgY8/P0AwdD2vp7kiaBm/B7lcL3aFZG2Y+boA/\n0w2Qkzktr8yqkPG/MPHno0+eGgP14YRNRZbmT3msVhCGNts0tpd0Nnl52TLU\nuD5SrgShvCiVVoHb8eCo2keM68LQRLAQ+DIJz7Z2N/qGPYBRaOj9PQgJ/sTd\nkOF8OQSm2U+AgZOg2VkG3z2IIHXzRbu1Q6IBB29GXkDawD8Krxm4KE3AAiPX\noEKxV9V6t9JCcz0b0PNfKKeNKFAruPS6+seMEPTFpT5zV1/Z9twXSFglb1ep\n7IAKGzYAZc8X/DE0+paYvlnZbLz6yYKvC3xf4lveVpIYit8yeJ53TjrGZ1rI\nAy2mYuQlTls3zptGp6zKNIEdMHFMthSBvumKDelkgca2RUhZodWhmGYqevyo\nis5O\r\n=ORbt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTyrgRoE5bpaYgLOvtTvHLfMPEng/hV6WmwfnLKHairgIgcU1qriQpQSQMw6udoxK6JmpPzuocLRVK2gRwDkF0by0="}]},"maintainers":[{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"}],"_npmUser":{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-async-utils_0.14.0_1572306608217_0.07729143982599673"},"_hasShrinkwrap":false}},"time":{"created":"2018-12-20T16:41:24.153Z","0.1.0":"2018-12-20T16:41:24.271Z","modified":"2022-05-14T06:27:27.637Z","0.1.1":"2018-12-20T18:03:43.024Z","0.2.0":"2018-12-20T20:07:21.038Z","0.3.0":"2018-12-20T22:21:23.880Z","0.3.1":"2018-12-21T09:52:03.949Z","0.4.0":"2018-12-28T22:44:12.885Z","0.5.0":"2019-01-10T17:52:10.090Z","0.5.1":"2019-01-29T14:41:35.876Z","0.5.2":"2019-01-29T14:59:50.650Z","0.6.0":"2019-02-14T15:39:43.817Z","0.6.1":"2019-02-14T16:17:10.471Z","0.7.0":"2019-02-28T22:25:34.867Z","0.7.1":"2019-03-01T11:24:18.504Z","0.8.0":"2019-03-04T22:20:10.532Z","0.9.0":"2019-03-07T13:12:59.153Z","0.10.0":"2019-03-17T23:41:32.353Z","0.10.1":"2019-03-18T03:43:54.915Z","0.10.2-alpha.0":"2019-03-18T23:46:29.712Z","0.10.2-alpha.1":"2019-03-19T00:15:02.939Z","0.10.2":"2019-03-19T01:40:05.887Z","0.10.3":"2019-03-21T19:39:52.696Z","0.11.0":"2019-03-22T00:13:46.002Z","0.12.0-alpha.0":"2019-03-27T11:14:26.997Z","0.12.0":"2019-03-31T12:37:27.321Z","0.12.1":"2019-03-31T12:51:24.160Z","0.13.0":"2019-04-25T00:11:18.592Z","0.13.1":"2019-05-03T17:21:33.699Z","0.13.2":"2019-05-03T18:02:19.906Z","0.13.3":"2019-10-28T21:46:46.470Z","0.14.0":"2019-10-28T23:50:08.377Z"},"maintainers":[{"name":"carlos-gines","email":"carlos.gines.fuster@gmail.com"}],"description":"Collection of utils to work with asynchronous data and asynchronous tasks in React in a more declarative way.","author":{"name":"Carlos Gines","email":"carlos.gines.fuster@gmail.com","url":"https://twitter.com/_carlosgines"},"license":"MIT","readme":"
\n
react-async-utils
\n\n\n
\n\n\n\n\n\n
\n
\n\nCollection of utils to work with asynchronous data and tasks in React in a more declarative way. Featuring `useAsyncData` and `useAsyncTask` hooks for this purpose. It is delightful to use with TypeScript, but it can equally be used with JavaScript.\n\n# Table of Contents\n\n\n\n\n- [The difficulties](#the-difficulties)\n - [Data structure](#data-structure)\n - [Features (React and non-React)](#features-react-and-non-react)\n- [This solution](#this-solution)\n - [Data structure](#data-structure-1)\n - [Features (React and non-React)](#features-react-and-non-react-1)\n- [Installation](#installation)\n- [The new `Async` data concept](#the-new-async-data-concept)\n - [The 4 basic states of `Async` data](#the-4-basic-states-of-async-data)\n - [The hooks](#the-hooks)\n - [`useAsyncData` hook](#useasyncdata-hook)\n - [`useAsyncTask` hook](#useasynctask-hook)\n - [Rendering `Async` data](#rendering-async-data)\n - [render](#render)\n - [AsyncViewContainer](#asyncviewcontainer)\n- [API Reference (WIP)](#api-reference-wip)\n - [InitAsync](#initasync)\n - [InProgressAsync](#inprogressasync)\n - [SuccessAsync](#successasync)\n - [ErrorAsync](#errorasync)\n - [Async](#async)\n - [`isInit`](#isinit)\n - [`isInProgress`](#isinprogress)\n - [`isSuccess`](#issuccess)\n - [`isError`](#iserror)\n - [`isInProgressOrInvalidated`](#isinprogressorinvalidated)\n - [`isAborted`](#isaborted)\n - [`getPayload`](#getpayload)\n - [`getError`](#geterror)\n - [Hooks](#hooks)\n - [`useAsyncData`](#useasyncdata)\n - [`useAsyncTask`](#useasynctask)\n - [`useManyAsyncTasks`](#usemanyasynctasks)\n- [Contributing](#contributing)\n- [LICENSE](#license)\n\n\n\n# The difficulties\n\n## Data structure\n\nDealing with asynchronous data or tasks is usually an imperative process, harder to express in a declarative manner, such as React promotes. It usually results in using a combination of variables/properties to keep track of the possible states:\n\n```javascript\nlet loading;\nlet data;\nlet error;\n// Maybe more...\n...\n```\n\nThis a somehow complex construct for such an ubiquitous case. It can lead to verbose code, even more when dealing with multiple pieces of async data at the same time. Some of these combinations don't even make sense (`loading === true && error !== undefined`?). It can feel awkward to follow this pattern.\n\n## Features (React and non-React)\n\nYou want to stay up to date with the state of art in our domain (Hooks, Concurrent Mode, Suspense...). You also want to take care of the more subtle requirements, like race conditions, or aborting. And you want to do it the right way. And that is not trivial.\n\n# This solution\n\n## Data structure\n\nThe base of this library is \"[making impossible states impossible](https://blog.kentcdodds.com/make-impossible-states-impossible-cf85b97795c1)\" for async data, and building rich abstractions around it.\n\nWe do not separate the data itself from its asynchronous state, we consider it an intrinsic part of its nature. And so we put it all together as a new data type consistent with this async nature.\n\nWe named this data type `Async`.\n\n```typescript\nlet asyncPerson: Async;\n```\n\nIt can be considered the declarative counterpart of a `Promise`.\n\nThis new data type allows us to create some powerful abstractions, like the `useAsyncData` custom hook\n\n```typescript\nconst asyncPerson = useAsyncData(getPersonPromise);\n```\n\nwhich we will explain further down.\n\n## Features (React and non-React)\n\nOur utils use the latest **stable** React capabilities to make working properly with async data and tasks **easy and direct**. They also take care of stuff like race conditions, cleaning up and easy aborting.\n\n# Installation\n\n```bash\nnpm install react-async-utils\n```\n\n# The new `Async` data concept\n\nWe are going to deal with async data in all of its possible states as a single entity. This entity includes all possible states and related data within it, in an ordered (and type-safe) manner.\n\n## The 4 basic states of `Async` data\n\nWe consider any `Async` data can exist in one of this 4 states:\n\n- **INIT**: nothing has happened yet. This is time 0 of our async process:\n\n```typescript\ninterface InitAsync {\n progress: Progress.Init;\n}\n```\n\n- **IN PROGRESS**: our async process is happening. We are waiting for its outcome:\n\n```typescript\ninterface InProgressAsync {\n progress: Progress.InProgress;\n}\n```\n\n- **SUCCESS**: our async process is successfully completed. The actual data will be available in its **payload**:\n\n```typescript\ninterface SuccessAsync {\n progress: Progress.Success;\n payload: Payload;\n}\n```\n\n- **ERROR**: our async process failed. There will be an **error**, the cause of this failure:\n\n```typescript\ninterface ErrorAsync {\n progress: Progress.Error;\n error: Error;\n}\n```\n\nAnd so, an `Async` data encapsulates the 4 states of a piece of data along the async process within a single data type:\n\n```typescript\nexport type Async =\n | InitAsync\n | InProgressAsync\n | SuccessAsync\n | ErrorAsync;\n```\n\nThis data type is the base of our library. Take your time to understand it, and we will be able to do great things with it.\n\n## The hooks\n\nThis library features 2 main hooks: `useAsyncData` and `useAsyncTask`:\n\n### `useAsyncData` hook\n\nA powerful abstraction to manage querying or fetching data in a declarative way. It takes care of race conditions and it can get aborted. It looks like this:\n\n```typescript\nconst asyncPerson = useAsyncData(getPersonPromise);\n```\n\n- **`getPersonPromise`**: input function to fetch data. It returns a `Promise` that resolves to the desired data.\n- **`asyncPerson`**: it is our `Async` data. It will be in the INIT state at the beginning, but will start getting updated as the data fetching task is triggered.\n\nThis hook will run our data fetching task as an effect, so it will happen automatically after the first render. This effect will update `asyncPerson` state according to the state of the `Promise` returned by `getPersonPromise`.\n\n⚠️ Be careful, this hook can cause infinite loops. The input function is a dependency of the effect. You want to use `React.useCallback` if needed to keep its identity and prevent these loops:\n\n```typescript\nconst asyncPerson = useAsyncData(\n React.useCallback(() => getPersonPromise(personId), [personId]),\n);\n```\n\nYou can read more details of `useAsyncData` hook at the [API Reference](#useasyncdata).\n\n### `useAsyncTask` hook\n\nSimilar to `useAsyncData`, this hook is used to manage posting or mutating data in a more declarative way. It can be aborted.\n\n```typescript\nconst asyncSubmitValues = useAsyncTask(() => submitValues);\n\nconst triggerButton = (\n \n);\n```\n\n- **`submitValues`**: input function that accepts input arguments and returns a `Promise` that resolves to the result of the operation.\n- **`asyncSubmitValues`**: it is our `Async` data. It will be in the INIT state at the beginning, but will start getting updated once the async task is triggered.\n- **`asyncSubmit.trigger`**: a function that triggers the async task. When invoked, it will call `submitValues` with the same arguments it receives, and it will update `asyncSubmit` state according to the state of the `Promise` returned by `submitValues`.\n\nUnlike `useAsyncData`, this task will not be triggered as an effect, you will trigger it with the `trigger` funtion, and you can provide it with any parameters.\n\nSee the [API Reference](#useasynctask) for more details.\n\n## Rendering `Async` data\n\n### render\n\nA good option is the `render` helper method. You can provide a render method per state. The corresponding one will be used:\n\n```tsx\nimport { render } from 'react-async-utls';\n\nrender(asyncPerson, {\n init: () =>
INIT state render. Nothing happened yet.
,\n inProgress: () => (\n
IN PROGRESS state render. We are fetching our Person.
\n ),\n success: person =>
SUCCESS state render. Please welcome {person.name}!
,\n error: error => (\n
ERROR state render. Something went wrong: {error.message}
\n ),\n});\n```\n\n### AsyncViewContainer\n\nAnother option is the `AsyncViewContainer` component:\n\n```tsx\nimport { AsyncViewContainer, getPayload } from 'react-async-utls';\n\nfunction MyComponent({ asyncPerson }) {\n person = getPayload(asyncPerson);\n return (\n 'Loading person...'}\n errorRender={error => `Something went wrong: ${error.message}`}\n >\n {person ? : 'No Data'}\n \n );\n}\n```\n\nApart from its children, it will render the render method of the corresponding `Async` data state.\n\nBONUS: `AsyncViewContainer` accepts an array at the `asyncData` prop :\n\n```tsx\nfunction MyComponent({ asyncPerson }) {\n return (\n 'Loading stuff...'}\n errorRender={errors => errors.map(error => error.message).join(' AND ')}\n >\n // ...\n \n );\n}\n```\n\nIt will render the corresponding render method if _any_ `Async` data is on that state.\n\n# API Reference (WIP)\n\nWork in progress.\n\n## InitAsync\n\n```typescript\nclass InitAsync {\n public progress: Progress.Init;\n public aborted?: boolean;\n public constructor(aborted?: boolean);\n}\n```\n\nRepresents the INIT state **and** the ABORTED sub-state.\n\n## InProgressAsync\n\n```typescript\nclass InProgressAsync {\n public progress: Progress.InProgress;\n public constructor();\n}\n```\n\nRepresents the IN PROGRESS state.\n\n## SuccessAsync\n\n```typescript\nclass SuccessAsync {\n public progress: Progress.Success;\n public payload: Payload;\n public invalidated?: boolean;\n public constructor(aborted?: boolean);\n}\n```\n\nRepresents the SUCCESS state, with its corresponding payload **and** the INVALIDATED sub-state (payload outdated, new one in progress).\n\n## ErrorAsync\n\n```typescript\nclass ErrorAsync {\n public progress: Progress.Error;\n public error: Error;\n public constructor(error: Error);\n}\n```\n\nRepresents the ERROR state, with its corresponding error.\n\n## Async\n\nAll `Async` objects have these methods:\n\n### `isInit`\n\n```typescript\npublic isInit(): this is InitAsync\n```\n\n- **@returns** `true` if async object is in INIT state and act as type guard.\n\n### `isInProgress`\n\n```typescript\npublic isInProgress(): this is InProgressAsync\n```\n\n- **@returns** `true` if async object is in IN PROGRESS state and act as type guard.\n\n### `isSuccess`\n\n```typescript\npublic isSuccess(): this is SuccessAsync\n```\n\n- **@returns** `true` if async object is in SUCCESS state and act as type guard.\n\n### `isError`\n\n```typescript\npublic isError(): this is ErrorAsync\n```\n\n- **@returns** `true` if async object is in ERROR state and act as type guard.\n\n### `isInProgressOrInvalidated`\n\n```typescript\npublic isInProgressOrInvalidated(): this is InProgressAsync | SuccessAsync\n```\n\n- **@returns** `true` if async object is in IN PROGRESS state or INVALIDATED sub-state and act as type guard.\n\n### `isAborted`\n\n```typescript\npublic isAborted(): this is InitAsync\n```\n\n- **@returns** `true` if async object is in ABORTED sub-state and act as type guard.\n\n### `getPayload`\n\n```typescript\npublic getPayload(): Payload | undefined\n```\n\n- **@returns** corresponding payload (generic) if async object is in SUCCESS state or `undefined` otherwise.\n\n### `getError`\n\n```typescript\npublic getError(): Error | undefined\n```\n\n- **@returns** corresponding `Error` if async object is in ERROR state or `undefined` otherwise.\n\n## Hooks\n\n### `useAsyncData`\n\n```typescript\nfunction useAsyncData(\n getData: (singal?: AbortSignal) => Promise,\n {\n disabled,\n onSuccess,\n onError,\n }: {\n disabled?: boolean;\n onSuccess?: (payload: Payload) => void;\n onError?: (error: Error) => void;\n },\n): AsyncData;\n\ntype AsyncData = Async & {\n refresh: () => void;\n};\n```\n\nThis hook is suitable for handling any kind of querying or data fetching. It takes care of race conditions and it cleans up on component unmount.\n\n⚠️ Be careful, all input functions (`getData`, `onSuccess`, `onError`) are dependencies of the effect it uses. You can create infinite loops if you do not hand them carefully. Wrap the input functions in `React.useCallback` if needed to prevent these infinite loops.\n\nDefinition:\n\n- **@param `getData`**\n\n _**You want to perform your fetch here**_. This input function is the async data fetching task that will be carried out. It must return a `Promise` that resolves to the desired data.\n\n It can use the `AbortSignal` that the hook provides (when browser supports it) if you want to make your task [abortable](https://developers.google.com/web/updates/2017/09/abortable-fetch).\n\n- **@param `options.disabled`**\n\n While false (default), your task will be run as an effect (inside a `useEffect` hook). If true, your task will not be run as an effect, it will always return an `InitAsync`.\n\n- **@param `options.onSuccess`**\n\n Callback function that will be called when the task reaches the SUCCESS state.\n\n- **@param `options.onError`**\n\n Callback function that will be called when the task reaches the ERROR state.\n\n- **@returns**\n\n The `AsyncData`, which is the `Async` corresponding to the current state of the data, extended with this function:\n\n - **refresh:** function that can be used to trigger the fetch manually (i.e. from a \"Refresh\" button).\n\n### `useAsyncTask`\n\n```typescript\nfunction useAsyncTask(\n getTask: (singal?: AbortSignal) => (...args: Args) => Promise,\n {\n onSuccess,\n onError,\n }: {\n onSuccess?: (payload: Payload) => void;\n onError?: (error: Error) => void;\n },\n): AsyncTask;\n\ntype AsyncTask = Async & {\n trigger: (...args: Args) => Promise>;\n abort: () => void;\n};\n```\n\nThis hook is suitable for handling any kind of data posting or mutation task. On component unmount it cleans up, but it does not abort flying requests (this can be done with the provided function).\n\nIf triggered multiple times in a row:\n\n- All triggered tasks will happen.\n- The returned `Aync` will only track the state of the last triggered tasks. See [`useManyAsyncTasks`](#usemanyasynctasks) if you want to trigger and track the state of many tasks.\n- `abort` will abort all existing tasks.\n\nDefinition:\n\n- **@param `getTask`**\n\n This input function returns the async task that will be carried out. The returned task can have any input arguments, that will be provided when the task is triggered. The task must return a `Promise` that can resolve to the result of the operation (i.e. the new ID of a posted item) or to void.\n\n It can use the `AbortSignal` that the hook provides (when browser supports it) if you want to make your task [abortable](https://developers.google.com/web/updates/2017/09/abortable-fetch).\n\n- **@param `options.onSuccess`**\n\n Callback function that will be called when the task reaches the SUCCESS state.\n\n- **@param `options.onError`**\n\n Callback function that will be called when the task reaches the ERROR state.\n\n- **@returns**\n\n The `AsyncTask`, which is the `Async` corresponding to the current state of the task, extended with these functions:\n\n - **trigger:** function that triggers the task (i.e. from a \"Submit\" button). It forwards its args to the task that you provided to the hook, and it returns a `Promise` of the `Async` result. You generally won't use this returned `Async`, it is a escape hatch for some cases.\n - **abort:** function that aborts the task, setting the `Async` back to the INIT state, and as ABORTED if it was IN PROGRESS or INVALIDTED.\n\n### `useManyAsyncTasks`\n\n```typescript\nfunction useManyAsyncTasks(\n getTask: (singal?: AbortSignal) => (...args: Args) => Promise,\n {\n onSuccess,\n onError,\n }: {\n onSuccess?: (payload: Payload) => void;\n onError?: (error: Error) => void;\n },\n): (key: any) => AsyncTask;\n```\n\nIt works exactly the same way `useAsyncTask` does, but this hook can be used to track multiple async tasks of the same type. Instead of returning an `AsyncTask`, it returns an `AsyncTask` getter. Use any key as input to obtain the associated `AsyncTask`.\n\n# Contributing\n\nOpen to contributions!\n\n# LICENSE\n\nMIT\n","readmeFilename":"README.md","homepage":"https://github.com/CarlosGines/react-async-utils#readme","repository":{"type":"git","url":"git+https://github.com/CarlosGines/react-async-utils.git"},"bugs":{"url":"https://github.com/CarlosGines/react-async-utils/issues"},"keywords":["async","concurrentmode","declarative","fetch","hooks","promise","react","reacthooks","reactjs","suspense","utils"]}
![\"turtle\"](\"https://raw.githubusercontent.com/CarlosGines/react-async-utils/master/other/turtle.png\")
\r\n\r\n\r\n![\"npm\"](\"https://img.shields.io/npm/v/react-async-utils.svg\")
\r\n![\"Travis](\"https://img.shields.io/travis/com/CarlosGines/react-async-utils.svg\")
\r\n![\"Coveralls](\"https://img.shields.io/coveralls/github/CarlosGines/react-async-utils.svg\")
\r\n![\"Snyk](\"https://img.shields.io/snyk/vulnerabilities/npm/react-async-utils.svg\")
\r\n![\"GitHub\"](\"https://img.shields.io/github/license/carlosgines/react-async-utils.svg\")
\r\n\r\n![\"Travis](\"https://img.shields.io/travis/com/CarlosGines/react-async-utils/master.svg\")
\n