Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/christoph-jerolimov/usepromises
React and React Native hook to consume a Promise (similar to useEffect) with full TypeScript support
https://github.com/christoph-jerolimov/usepromises
react react-hooks react-native reactjs reactnative typescript
Last synced: about 1 month ago
JSON representation
React and React Native hook to consume a Promise (similar to useEffect) with full TypeScript support
- Host: GitHub
- URL: https://github.com/christoph-jerolimov/usepromises
- Owner: christoph-jerolimov
- License: mit
- Created: 2020-03-09T23:40:59.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-07-23T12:41:35.000Z (5 months ago)
- Last Synced: 2024-10-28T14:16:41.345Z (about 2 months ago)
- Topics: react, react-hooks, react-native, reactjs, reactnative, typescript
- Language: TypeScript
- Homepage:
- Size: 994 KB
- Stars: 2
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# usePromises
**React and React Native hook to consume a Promise (similar to useEffect) with full TypeScript support**
## Installation
```
npm install --save usepromises
```
or
```
yarn add usepromises
```
## Usage / Examples
### usePromise
```javascript
import { usePromise } from 'usepromises';
...
interface SampleResponse {
slideshow: {
title: string
}
}
function Example() {
const response = usePromise(async () => {
const response = await fetch('https://httpbin.org/json');
return response.json();
}, []);
return (
{response.isResolved && response.value.slideshow.title}
{response.isRejected ? `Error: ${response.error}` : null}
);
};
```
### useMountPromise
```javascript
import { useMountPromise } from 'usepromises';
...
interface SampleData {
slideshow: {
title: string
}
}
function Example() {
const [data, setData] = useState();
useMountPromise(async () => {
const response = await fetch('https://httpbin.org/json');
setData(await response.json());
});
...
};
```
### useUnmountPromise
```javascript
import { useUnmountPromise } from 'usepromises';
...
interface SampleResponse {
slideshow: {
title: string
}
}
function Example() {
useUnmountPromise(async () => {
const response = await fetch('https://httpbin.org/json');
console.warn('Server status code:', response.status);
});
...
};
```