https://github.com/donnikitos/react-usepromise

Use promisises and asynchronous loading with React.js
https://github.com/donnikitos/react-usepromise

Last synced: 8 days ago
JSON representation

Use promisises and asynchronous loading with React.js

• Host: GitHub
• URL: https://github.com/donnikitos/react-usepromise
• Owner: donnikitos
• License: mit
• Created: 2020-12-15T09:17:08.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2020-12-16T09:51:45.000Z (almost 4 years ago)
• Last Synced: 2024-10-11T17:42:09.293Z (about 1 month ago)
• Language: JavaScript
• Size: 17.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
usePromise

===========

[![NPM version](https://badgen.net/npm/v/@donnikitos/react-usepromise)](https://www.npmjs.com/package/@donnikitos/react-usepromise)

[![License](https://badgen.net/npm/license/@donnikitos/react-usepromise)](https://www.npmjs.com/package/@donnikitos/react-usepromise)

A very simple function to use Promises with React.js's states.

Install with [npm](https://www.npmjs.com/):

```bash

# via npm

npm install --save-dev @donnikitos/react-usepromise

```

## Usage

The `usePromiseState` function takes a string or component that should be displayed while the promise is not yeat resolved.

It returns a variable and a setter function very much like in React.js.

The setter function may take up to 2 parameters:

* 1st - Promise

* 2nd - Module Part to load (default is `default`)

```js

import React from 'react';

// import usePromiseState from '@donnikitos/react-usepromise';

import { usePromise } from '@donnikitos/react-usepromise';

// use in Component

export default function Comp(props) {

	const [display, setDisplay] = usePromise('Loading...');

	React.useEffect(() => {

		setDisplay(import('./link-to-file'));					// loads the default export from link-to-file

	}, []);

	return (


		{display}

	
);

};

```


```js

import React from 'react';

// import usePromiseState from '@donnikitos/react-usepromise';

import { usePromise } from '@donnikitos/react-usepromise';

// use in Component

export default function Comp(props) {

	const [display, setDisplay] = usePromise('Loading...');

	React.useEffect(() => {

		setDisplay(new Promise((resolve) => resolve('Hello World!')));					// loads the default export from link-to-file

	}, []);

	return (


		{display}

	
);

};

```


### Alternate usage

Alternatively you can use the `updateState` function to update the state with a Promise:

```js

import React from 'react';

import { updateState } from '@donnikitos/react-usepromise';

// use in Component

export default function Comp(props) {

	const [display, setDisplay] = usePromiseState('Loading...');

	const updateDisplay = updateState(setDisplay);

	React.useEffect(() => {

		updateDisplay(import('./link-to-file'), 'someExport');		// loads the someExport export from link-to-file -> also possible with the normal version

	}, []);

	return (


		{display}

	
);

};

```


## License

[MIT](LICENSE) Copyright (c) 2020 Nikita 'donnikitos' Nitichevski.