{"_id":"react-wait","_rev":"7-9b3a5758931a93d86606803cfa062207","name":"react-wait","description":"Complex Loader Management for React Applications","dist-tags":{"latest":"0.3.0"},"versions":{"1.0.0":{"name":"react-wait","version":"1.0.0","description":"a loading spinner to be desplayed when waiting","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Kyle Martin"},"license":"ISC","peerDependencies":{"react":"^15.5.4","react-dom":"^15.5.4"},"devDependencies":{"@types/react":"^15.0.25","@types/react-dom":"^15.5.0","awesome-typescript-loader":"^3.1.3","prop-types":"^15.5.10","react-move":"^1.5.0","source-map-loader":"^0.2.1","style-loader":"^0.18.1","typescript":"^2.3.3","webpack":"^2.6.1"},"_id":"react-wait@1.0.0","_shasum":"e42664d93ced337437fbf3e85e35c80dac5aa364","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.10.2","_npmUser":{"name":"kmart08","email":"kyle.martin8@live.com"},"dist":{"shasum":"e42664d93ced337437fbf3e85e35c80dac5aa364","tarball":"https://registry.npmjs.org/react-wait/-/react-wait-1.0.0.tgz","integrity":"sha512-O5/9X7WQFxsHH/6fKcPIeU86pB4Cw2RtwTdyazDKhFS6Wz94l8nEWVxtbYGHwvOWjeFOk7KuztJPinYGe53Vng==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRSsI4IsnSKC5kxz27hCSzWi6V5pSYnkezUJ1glnUvOgIgZMaNQs3t8KYwvzDYg6dBFy+SD1Tt3g9JRRYlNuAkqW4="}]},"maintainers":[{"name":"kmart08","email":"kyle.martin8@live.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-wait-1.0.0.tgz_1496231220343_0.4066911959089339"},"directories":{}},"1.0.1":{"name":"react-wait","version":"1.0.1","description":"a loading spinner to be desplayed when waiting","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Kyle Martin"},"license":"ISC","peerDependencies":{"react":"^15.5.4","react-dom":"^15.5.4"},"devDependencies":{"@types/react":"^15.0.25","@types/react-dom":"^15.5.0","awesome-typescript-loader":"^3.1.3","prop-types":"^15.5.10","react-move":"^1.5.0","source-map-loader":"^0.2.1","style-loader":"^0.18.1","typescript":"^2.3.3","webpack":"^2.6.1"},"_id":"react-wait@1.0.1","_shasum":"f24477f7ea7ae6b6e4689b2ec6ed3dad8fbbb30d","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.10.2","_npmUser":{"name":"kmart08","email":"kyle.martin8@live.com"},"dist":{"shasum":"f24477f7ea7ae6b6e4689b2ec6ed3dad8fbbb30d","tarball":"https://registry.npmjs.org/react-wait/-/react-wait-1.0.1.tgz","integrity":"sha512-JW3WGBZy1YkDP/gb8p3D8POH5K1raPfy0ldb5sHHa4jy+j9rUjgvH/kPBXP4rVBS7ilA6CYDAnoH4lkmdlXepg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqCZxiqztot5d9wR6XpZ3gJNHmamIKxq1AryHN1aNJ8gIgMAxKXVg6rMHVoCvqaqyd7sb0vD+MVx5VXkZNmDulV+w="}]},"maintainers":[{"name":"kmart08","email":"kyle.martin8@live.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-wait-1.0.1.tgz_1496231688154_0.3691448720637709"},"directories":{}},"0.2.3":{"name":"react-wait","version":"0.2.3","description":"Complex Loader Management for React Applications","main":"./dist/use-wait.js","module":"./dist/use-wait.esm.js","scripts":{"build":"microbundle --jsx React.createElement","test":"jest --verbose"},"repository":{"type":"git","url":"git+https://github.com/f/use-wait.git"},"keywords":["react","use","hooks","vue-wait","loading","loader"],"author":{"name":"Fatih Kadir Akın","email":"fatihkadirakin@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/f/use-wait/issues"},"peerDependencies":{"react":">=16.7.0-alpha"},"devDependencies":{"babel-core":"^6.26.3","babel-jest":"^23.6.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","enzyme":"^3.7.0","enzyme-adapter-react-16":"^1.6.0","jest":"^23.6.0","microbundle":"^0.7.0","react":">=16.7.0-alpha","react-dom":">=16.7.0-alpha","regenerator-runtime":"^0.12.1"},"homepage":"https://github.com/f/use-wait#readme","gitHead":"f62f5a0088b4d11c3690e9a3792b142c89eaa3cc","_id":"react-wait@0.2.3","_npmVersion":"6.4.1","_nodeVersion":"10.11.0","_npmUser":{"name":"fkadev","email":"fatihkadirakin@gmail.com"},"dist":{"integrity":"sha512-tpd1n9mpJ9pcERGr8pabmZ9bJKlKGIe6mx+0Y01YQWwJJWQpNSBg7UbF4c5wtI+gFs/VdPID1z6rcUvhcxy09g==","shasum":"02cc21c483716627faf5fd6b9de4de3f04d90aa8","tarball":"https://registry.npmjs.org/react-wait/-/react-wait-0.2.3.tgz","fileCount":9,"unpackedSize":18793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4haqCRA9TVsSAnZWagAARSUQAJKYprhviD4XmqdY3I2I\n/we/m4fYX6Js61fMietoyK+SyvQPR4ixXm2B2PL+JZ19S5ixmidFY+IOoTKq\nvk6uwVz+X1rO86cfEoPXPaXYSMWI4Mi8pJUPW37Z8W+klGA7DEZ+ReQE3UbX\nfUTCHPuDAh31oqfSqQquZS/rMnX/c9UujX4Xmeo696e8jaz6JKXXwRnlVYn4\nMX5uDml94EohByLPeKoUbDLYAep3DbiRuKxPqRkkpUHLCiVea7SGnYQo2Ke/\noqmDa33ExMTUMO3fxR92yNAkOwzPN3R1MmDOGJ3woIWA0KJYGBbuJ2cyxXZk\n2J6Qy4viBo7k2qT3PKS7XMOfugP5c1ETk3rKyM0mdbOII/NVmyyGtKMG8/dJ\nZjh0i0rOVTYWU+otEfVO2IXocEcvpdZVroTOlGLGTgtC76u8aMBx+Kh2kYeD\nEUiYxBZuTrrZg7D6Ysx4N2KfswuMFcrieoz18ACaunEHc0CjEm+w40Sn2f4M\naSZyhdzxnjXbRwlALKhZNEi6kK786fu8EeHxRwLKo5loxJZxzg1tU6SzvdcL\noxPulxQTe4V+l0EJ5bbQzwszwaEQkxzYHb9z8TWQ9bzXX5iKziOwE91ApV+b\n3KSJS6EYEG6ZktyhkZH2HQmM5L9/CSt+P79HRVpyna+FoQ7nOCfwl5Koooft\nx0oI\r\n=EiIg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIATjDRdk+t/2349EVaCOk2PqApVlQDL67gB165bUbpVdAiEAlBgIEbQJZ2Q7qcobNBaV0lz6MBjuHKfdOqfbNqfIgac="}]},"maintainers":[{"email":"fatihkadirakin@gmail.com","name":"fkadev"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-wait_0.2.3_1541543593681_0.14714521376679457"},"_hasShrinkwrap":false},"0.3.0":{"name":"react-wait","version":"0.3.0","description":"Complex Loader Management for React Applications","main":"./dist/react-wait.js","module":"./dist/react-wait.esm.js","scripts":{"build":"microbundle --jsx React.createElement","test":"jest --verbose"},"repository":{"type":"git","url":"git+https://github.com/f/react-wait.git"},"keywords":["react","wait","use","hooks","vue-wait","loading","loader"],"author":{"name":"Fatih Kadir Akın","email":"fatihkadirakin@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/f/react-wait/issues"},"peerDependencies":{"react":">=16.7.0-alpha"},"devDependencies":{"babel-core":"^6.26.3","babel-jest":"^23.6.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","enzyme":"^3.7.0","enzyme-adapter-react-16":"^1.6.0","husky":"^1.1.3","jest":"^23.6.0","lint-staged":"^8.0.4","microbundle":"^0.7.0","react":">=16.7.0-alpha","react-dom":">=16.7.0-alpha","regenerator-runtime":"^0.12.1"},"homepage":"https://github.com/f/react-wait#readme","husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write src","git add"]},"gitHead":"6ffb2042d5bc4be1a64e3f5909d0c6b4762b9b09","_id":"react-wait@0.3.0","_npmVersion":"6.4.1","_nodeVersion":"10.11.0","_npmUser":{"name":"fkadev","email":"fatihkadirakin@gmail.com"},"dist":{"integrity":"sha512-kB5x/kMKWcn0uVr9gBdNz21/oGbQwEQnF3P9p6E9yLfJ9DRcKS0fagbgYMFI0YFOoyKDj+2q6Rwax0kTYJF37g==","shasum":"0cdd4d919012451a5bc3ab0a16d00c6fd9a8c10b","tarball":"https://registry.npmjs.org/react-wait/-/react-wait-0.3.0.tgz","fileCount":9,"unpackedSize":21062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4ty1CRA9TVsSAnZWagAAVFkP/il9QGRMI5W0OBy3+JFw\nhsa3UtsP9SfzSC9J/y1qS2XZf6mk2Dvi3yLbCOpw7bMzKWrD+9GLe1UBjk3+\nt98U0XpGqTDUJooPMRuZx1QnOpw5v5u2j4SieucfVGtLwQItNAvbqYi26jj8\n/kcYRjOWHzehNK92OJN3Nrt/pkErhtYBzeLOXZzZxex3JIhxWlkCCBFliVOY\nTXa87FdbMGzff7/8PiVKboogFm6WkXMf5e4yL78o/O2tHW6n7LsuG6innxY3\nmcfNO/LSN9B4pRrDSr5fbdLPqSb3D5DHeMv4kekRfUddQsmy6OWegLFO/f/1\n5vqWxxOqpWRnKWmxJSeELeJ72g0TIfBMRu+63ERB0+aEYqyC3KzSLBKJ0Jaq\nAdnjSDk45qrDokspG+ZOVRek0KdDGv3VPpcAJzguFsLD9pEF+JpfQ0awLmjD\nXBo7ekeD6xyUZ5jBW6BN09fRsZrPGfu8YUBLZuf3RZdpQrM218HMGrA2/hoe\nbdUu5dXNk3fY8cYFkNMbKdyZB3gkGryYhntC63svaoifKaVEsP8DTeGcM5dH\nHAxYfv8wBqW6fZhd6v910zAS238Puqrm0jRKAOWKd4BL5qYysNUxwVQPwXAc\n3wGh4FKUqNRxt3DVzk60a54DEx2v7Eq4dgfpqElUiZh7aqSKwnWIK4QOR9GP\nUTqb\r\n=buku\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG17FCOjBbAwPvg+k/YCLk5a7wJgcdi2/vz8s6N8Fn5sAiEA2DDPQfQz7cVPkm7qu3J8AsrL6rFWkOMgAQeXSf5jfhw="}]},"maintainers":[{"email":"fatihkadirakin@gmail.com","name":"fkadev"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-wait_0.3.0_1541594292350_0.2939189945383669"},"_hasShrinkwrap":false}},"readme":"<p align=\"center\">\n<img src=\"./resources/logo.png\" width=\"500\">\n</p>\n<p align=\"center\">\n Complex Loader Management for <a href=\"http://reactjs.org/\" rel=\"nofollow\" class=\"rich-diff-level-one\">React</a>.\n</p>\n\n<p align=\"center\">\n <strong class=\"rich-diff-level-one\">Read the <a href=\"https://medium.com/@fkadev/managing-complex-waiting-experiences-on-web-uis-29534d2d92a8\" rel=\"nofollow\">Medium post \"Managing Complex Waiting Experiences on Web UIs\"</a>.</strong>\n</p>\n\n<p align=\"center\">\n<img src=\"./resources/react-wait.gif\" width=\"600\" />\n</p>\n\n[![npm version](https://badge.fury.io/js/react-wait.svg)](https://badge.fury.io/js/react-wait)\n[![build](https://api.travis-ci.org/f/react-wait.svg?branch=master)](https://travis-ci.org/f/react-wait)\n\n---\n\n> [Play with Demo](https://codesandbox.io/s/pmp3w1om17).\n\n**react-wait** is a **React Hook** helps to manage multiple loading states on the page without any conflict. It's based on a **very simple idea** that manages a **`Arrayg`** with multiple loading states. The **built-in loader component** listens its registered loader and immediately become loading state.\n\n## **Why not `React.Suspense`?**:\n\nReact has its own Suspense feature to manage all the async works. For now it only supports code-splitting (not data-fetching).\n\n`useWait` allows you to manage waiting experiences much more explicitly and **not only for Promised/async patterns but also complete loading management**.\n\n# Overview\n\nHere's a quick overview that what's `useWait` for:\n\n```jsx\nimport { useWait, Waiter } from \"react-wait\";\n\nfunction A() {\n  const { isWaiting } = useWait();\n  return (\n    <div>\n      {isWaiting(\"creating user\") ? \"Creating User...\" : \"Nothing happens\"}\n    </div>\n  );\n}\n\nfunction B() {\n  const { anyWaiting } = useWait();\n  return (\n    <div>\n      {anyWaiting() ? \"Something happening on app...\" : \"Nothing happens\"}\n    </div>\n  );\n}\n\nfunction C() {\n  const { startWaiting, endWaiting, isWaiting } = useWait();\n\n  function createUser() {\n    startWaiting(\"creating user\");\n    // Faking the async work:\n    setTimeout(() => {\n      endWaiting(\"creating user\");\n    }, 1000);\n  }\n\n  return (\n    <button disabled={isWaiting(\"creating user\")} onClick={createUser}>\n      <Wait on=\"creating user\" fallback={<Spinner />}>\n        Create User\n      </Wait>\n    </button>\n  );\n}\n\nReactDOM.render(\n  <Waiter>\n    <C />\n  </Waiter>,\n  document.getElementById(\"root\")\n);\n```\n\n# Quick Start\n\nIf you are a **try and learn** developer, you can start trying the **react-wait** now using [codesandbox.io](https://codesandbox.io).\n\n[![Edit useWait](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/pmp3w1om17)\n\n### 1. Install:\n\n```bash\nyarn add react-wait\n```\n\n### 2. Require:\n\n```jsx\nimport { Waiter, useWait } from \"react-wait\";\n\nfunction UserCreateButton() {\n  const { startWaiting, endWaiting, isWaiting, Wait } = useWait();\n\n  return (\n    <button\n      onClick={() => startWaiting(\"creating user\")}\n      disabled={isWaiting(\"creating user\")}\n    >\n      <Wait on=\"creating user\" fallback={<div>Creating user!</div>}>\n        Create User\n      </Wait>\n    </button>\n  );\n}\n```\n\n### 3. Wrap with the `Waiter` Context Provider\n\nAnd you should wrap your `App` with `Waiter` component. It's actually a `Context.Provider` that provides a loading context to the component tree.\n\n```jsx\nconst rootElement = document.getElementById(\"root\");\nReactDOM.render(\n  <Waiter>\n    <App />\n  </Waiter>,\n  rootElement\n);\n```\n\n## Installation\n\n```bash\n$ yarn add react-wait\n# or if you using npm\n$ npm install react-wait\n```\n\n## The API\n\n**react-wait** provides some helpers to you to use in your templates.\n\n#### `anyWaiting()`\n\nReturns boolean value if any loader exists in context.\n\n```jsx\nconst { anyWaiting } = useWait();\n\nreturn <button disabled={anyWaiting()}>Disabled while waiting</button>;\n```\n\n#### `isWaiting(waiter String)`\n\nReturns boolean value if given loader exists in context.\n\n```jsx\nconst { isWaiting } = useWait();\n\nreturn (\n  <button disabled={isWaiting(\"creating user\")}>\n    Disabled while creating user\n  </button>\n);\n```\n\n#### `startWaiting(waiter String)`\n\nStarts the given waiter.\n\n```jsx\nconst { startWaiting } = useWait();\n\nreturn <button onClick={() => startWaiting(\"message\")}>Start</button>;\n```\n\n#### `endWaiting(waiter String)`\n\nStops the given waiter.\n\n```jsx\nconst { end } = useWait();\n\nreturn <button onClick={() => endWaiting(\"message\")}>Stop</button>;\n```\n\n## Using `Wait` Component\n\n```jsx\nfunction Component() {\n  const { Wait } = useWait();\n  return (\n    <Wait on=\"the waiting message\" fallback={<div>Waiting...</div>}>\n      The content after waiting done\n    </Wait>\n  );\n}\n```\n\nBetter example for a `button` with loading state:\n\n```jsx\n<button disabled={isWaiting(\"creating user\")}>\n  <Wait on=\"creating user\" fallback={<div>Creating User...</div>}>\n    Create User\n  </Wait>\n</button>\n```\n\n## Making Reusable Loader Components\n\nWith reusable loader components, you will be able to use custom loader components as example below. This will allow you to create better **user loading experience**.\n\n```jsx\nfunction Spinner() {\n  return <img src=\"spinner.gif\" />;\n}\n```\n\nNow you can use your spinner everywhere using `waiting` attribute:\n\n```jsx\n<button disabled={isWaiting(\"creating user\")}>\n  <Wait on=\"creating user\" fallback={<Spinner />}>\n    Create User\n  </Wait>\n</button>\n```\n\n## Creating Waiting Contexts using `createWaitingContext(context String)`\n\nTo keep your code DRY you can create a `Waiting Context` using `createWaitingContext`.\n\n```jsx\nfunction CreateUserButton() {\n  const { createWaitingContext } = useWait();\n\n  // All methods will be curried with \"creating user\" on.\n  const { startWaiting, endWaiting, isWaiting, Wait } = createWaitingContext(\n    \"creating user\"\n  );\n\n  function createUser() {\n    startWaiting();\n    setTimeout(endWaiting, 1000);\n  }\n\n  return (\n    <Button disabled={isWaiting()} onClick={createUser}>\n      <Wait fallback=\"Creating User...\">Create User</Wait>\n    </Button>\n  );\n}\n```\n\n## Contributors\n\n- Fatih Kadir Akın, (creator)\n\n## Other Implementations\n\nSince **react-wait** based on a very simple idea, it can be implemented on other frameworks.\n\n- [vue-wait](https://github.com/f/vue-wait): Multiple Process Loader Management for Vue.\n- [dom-wait](https://github.com/f/dom-wait): Multiple Process Loader Management for vanilla JavaScript.\n\n## License\n\nMIT © [Fatih Kadir Akın](https://github.com/f)\n","maintainers":[{"email":"fatihkadirakin@gmail.com","name":"fkadev"}],"time":{"modified":"2022-06-26T08:53:15.094Z","created":"2017-05-31T11:47:01.712Z","1.0.0":"2017-05-31T11:47:01.712Z","1.0.1":"2017-05-31T11:54:49.447Z","0.2.3":"2018-11-06T22:33:13.783Z","0.3.0":"2018-11-07T12:38:12.513Z"},"author":{"name":"Fatih Kadir Akın","email":"fatihkadirakin@gmail.com"},"license":"MIT","readmeFilename":"README.md","homepage":"https://github.com/f/react-wait#readme","keywords":["react","wait","use","hooks","vue-wait","loading","loader"],"repository":{"type":"git","url":"git+https://github.com/f/react-wait.git"},"bugs":{"url":"https://github.com/f/react-wait/issues"}}