@donnikitos/react-usepromise

usePromise

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.