{"id":13441086,"url":"https://github.com/capaj/react-promise","last_synced_at":"2025-04-14T16:13:43.609Z","repository":{"id":3153609,"uuid":"48593527","full_name":"capaj/react-promise","owner":"capaj","description":"a react.js hook for general promise in typescript","archived":false,"fork":false,"pushed_at":"2022-12-09T00:45:43.000Z","size":1397,"stargazers_count":92,"open_issues_count":21,"forks_count":19,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-14T16:13:37.233Z","etag":null,"topics":["asynchronous","hacktoberfest","react-component","reactjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/capaj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-25T23:08:28.000Z","updated_at":"2024-12-20T01:45:07.000Z","dependencies_parsed_at":"2023-01-13T12:45:20.405Z","dependency_job_id":null,"html_url":"https://github.com/capaj/react-promise","commit_stats":null,"previous_names":["capaj/react-async"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capaj%2Freact-promise","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capaj%2Freact-promise/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capaj%2Freact-promise/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capaj%2Freact-promise/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/capaj","download_url":"https://codeload.github.com/capaj/react-promise/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248914115,"owners_count":21182359,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["asynchronous","hacktoberfest","react-component","reactjs"],"created_at":"2024-07-31T03:01:29.756Z","updated_at":"2025-04-14T16:13:43.579Z","avatar_url":"https://github.com/capaj.png","language":"TypeScript","funding_links":[],"categories":["HarmonyOS"],"sub_categories":["Windows Manager"],"readme":"# react-promise\n\n[![NPM badge](https://nodei.co/npm/react-promise.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/react-promise/)\n\na react.js hook for general promise written in typescript.\nLet's consider a trivial example: you have a promise such as this\n\n```javascript\nlet prom = new Promise(function(resolve, reject) {\n  setTimeout(function() {\n    resolve('a value')\n  }, 100)\n})\n```\n\nand you want to make a component, which renders out in it's body 'a value'. Without react-promise, such component may look like this:\n\n```javascript\nclass ExampleWithoutAsync extends React.Component { // you can't use stateless component because you need a state\n  constructor () {\n    super()\n    this.state = {}\n  }\n  componentDidMount() {\n    prom.then((value) =\u003e {\n      this.setState({val: value})\n    })\n  }\n  render () {\n    if (!this.state.val) return null\n    return \u003cdiv\u003e{this.state.val}\u003c/div\u003e\n  }\n\n// or you could use a combination of useEffect and useState hook, which is basically the implementation of this small library\n```\n\nand with react-promise:\n\n```tsx\nimport usePromise from 'react-promise';\n\nconst ExampleWithAsync = (props) =\u003e {\n  const {value, loading} = usePromise\u003cstring\u003e(prom)\n  if (loading) return null\n  return \u003cdiv\u003e{value}\u003c/div\u003e}\n}\n```\n\n## API\n\nThe only argument can be a promise or a promise resolving thunk:\n\n```ts\nusePromise\u003cT\u003e(\n  promiseOrFn: (() =\u003e Promise\u003cT\u003e) | Promise\u003cT\u003e\n)\n```\n\nit might be desirable to let the usePromise call the promise returnig function, because you often don't want to do that inside the render of your functional component.\n\nFull state object interface returned by the hook looks like:\n\n```ts\n{\n  loading: boolean\n  error: Error | null\n  value: T | undefined // where T is your shape of the resolved data you expect obviously\n}\n```\n\n## install\n\nWith npm:\n\n```\nnpm i react-promise\n```\n\n[For version 2 docs, refer to the old readme](https://github.com/capaj/react-promise/tree/1691b7202be806db5f41784d6e2cc9d231a3975c#react-promise).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcapaj%2Freact-promise","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcapaj%2Freact-promise","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcapaj%2Freact-promise/lists"}