https://github.com/vigzmv/react-promise-suspense

A React hook for resolving promises with Suspense support. <1kb bundle.
https://github.com/vigzmv/react-promise-suspense

hacktoberfest hooks promise react suspense

Last synced: 11 days ago
JSON representation

A React hook for resolving promises with Suspense support. <1kb bundle.

• Host: GitHub
• URL: https://github.com/vigzmv/react-promise-suspense
• Owner: vigzmv
• License: mit
• Created: 2019-03-11T09:30:14.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-02-12T07:24:53.000Z (over 1 year ago)
• Last Synced: 2024-10-18T21:34:17.694Z (23 days ago)
• Topics: hacktoberfest, hooks, promise, react, suspense
• Language: TypeScript
• Homepage: https://npmjs.com/package/react-promise-suspense
• Size: 636 KB
• Stars: 162
• Watchers: 3
• Forks: 9
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - react-promise-suspense

README

        
# usePromise

React hook for resolving promises with Suspense support.

Inspired by [fetch-suspense](https://github.com/CharlesStover/fetch-suspense), but this one is not limited to fetch, `usePromise` works with any Promise.

[![version](https://img.shields.io/npm/v/react-promise-suspense.svg)](https://www.npmjs.com/package/react-promise-suspense)

[![minified size](https://img.shields.io/bundlephobia/min/react-promise-suspense.svg)](https://www.npmjs.com/package/react-promise-suspense)

[![minzipped size](https://img.shields.io/bundlephobia/minzip/react-promise-suspense.svg)](https://www.npmjs.com/package/react-promise-suspense)

[![downloads](https://img.shields.io/npm/dt/react-promise-suspense.svg)](https://www.npmjs.com/package/react-promise-suspense)

## Install

* `npm install react-promise-suspense --save`

## Example

- Here's an [Codesandbox example](https://codesandbox.io/s/react-promise-suspense-example-t14mh) of a setTimeout delayed component. 

- Awaiting a fetch promise:

```js

import usePromise from 'react-promise-suspense';

const fetchJson = input => fetch(input).then(res => res.json());

const MyFetchingComponent = () => {

  // usePromise(Promise, [inputs,],)

  const data = usePromise(fetchJson, [

    'https://pokeapi.co/api/v2/pokemon/ditto/',

    { method: 'GET' },

  ]);

  return 
{JSON.stringify(data, null, 2)}
;

};


const App = () => {

  return (

    

      

    

  );

};

```