@donnikitos/react-usepromise
TypeScript icon, indicating that this package has built-in type declarations

1.1.5 • Public • Published

usePromise

NPM version License

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

Install with npm:

# 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)
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 (<div>
		{display}
	</div>);
};
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 (<div>
		{display}
	</div>);
};

Alternate usage

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

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 (<div>
		{display}
	</div>);
};

License

MIT Copyright (c) 2020 Nikita 'donnikitos' Nitichevski.

Package Sidebar

Install

npm i @donnikitos/react-usepromise

Weekly Downloads

1

Version

1.1.5

License

MIT

Unpacked Size

6.07 kB

Total Files

5

Last publish

Collaborators

  • donnikitos