@donnikitos/react-usepromise

PromiseState

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

Install with npm:

# via npm
npm install @n94/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 -

import React from 'react';
// import usePromiseState from '@n94/react-usepromise';
import { usePromise } from '@n94/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>);
};

Alternate usage

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

import React from 'react';
import { updateState } from '@n94/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.