reactstrap-buttonasync

Reactstrap Button with support that will disable itself and optionally show different children when isExecuting is true (usually during an async task).

Installation

Install with npm:

npm install reactstrap-buttonasync

Or with yarn:

yarn add reactstrap-buttonasync

Basic Usage

There are two main uses, first standalone button with its click handler:

Typescript

import { ButtonAsync } from 'reactstrap-buttonasync';

export const Example = (props: any) => {
	const [isCalculating, setIsCalculating] = React.useState<boolean>(false);

	const onClick = React.useCallback(async (event: React.FormEvent<HTMLButtonElement>) => {
		setIsCalculating(true);
        // Do real calcualting or REST call here.
		setIsCalculating(false);
    }, [setIsCalculating]); 

	return (
			<>
				<ButtonAsync color="primary" isExecuting={isCalculating} onClick={onClick}
					executingChildren={<><FontAwesomeIcon icon="spinner" spin /> Calculating...</>}>
					<FontAwesomeIcon icon="calculator" /> Calculate
				</ButtonAsync>
            </>
    );
};

Javascript

import { ButtonAsync } from 'reactstrap-buttonasync';

export const Example = (props) => {
	const [isCalculating, setIsCalculating] = React.useState(false);

	const onClick = React.useCallback(async (event) => {
		setIsCalculating(true);
        // Do real calcualting or REST call here.
		setIsCalculating(false);
    }, [setIsCalculating]); 

	return (
			<>
				<ButtonAsync color="primary" isExecuting={isCalculating} onClick={onClick}
					executingChildren={<><FontAwesomeIcon icon="spinner" spin /> Calculating...</>}>
					<FontAwesomeIcon icon="calculator" /> Calculate
				</ButtonAsync>
            </>
    );
};

Second, as the submit button for a form:

Typescript

import { ButtonAsync } from 'reactstrap-buttonasync';

export const Example = (props: any) => {
	const [isSaving, setIsSaving] = React.useState<boolean>(false);

	const onSubmit = React.useCallback(async (event: React.FormEvent<HTMLFormElement>) => {
		setIsSaving(true);
        // Do real saving or REST call here.
		setIsSaving(false);
    }, [setIsSaving]); 

	return (
            <Form onSubmit={onSubmit}>
				<FormGroup>
                    <Label htmlFor="name">Name</Label>
                    <Input type="text" name="name" placeholder="Name" value={props.name} />
                </FormGroup>

				<ButtonAsync type="submit" color="primary" isExecuting={isSaving}
					executingChildren={<><FontAwesomeIcon icon="spinner" spin /> Saving...</>}>
					<FontAwesomeIcon icon="save" /> Save
				</ButtonAsync>
            </Form>
    );
};

Javascript

import { ButtonAsync } from 'reactstrap-buttonasync';

export const Example = (props) => {
	const [isSaving, setIsSaving] = React.useState(false);

	const onSubmit = React.useCallback(async (event) => {
        setIsSaving(true);
        // Do real saving or REST call here.
		setIsSaving(false);
    }, [setIsSaving]); 

	return (
            <Form onSubmit={onSubmit}>
				<FormGroup>
                    <Label htmlFor="name">Name</Label>
                    <Input type="text" name="name" placeholder="Name" value={props.name} />
                </FormGroup>

				<ButtonAsync type="submit" color="primary" isExecuting={isSaving}
					executingChildren={<><FontAwesomeIcon icon="spinner" spin /> Saving...</>}>
					<FontAwesomeIcon icon="save" /> Save
				</ButtonAsync>
            </Form>
    );
};

Usage with react-use-async-callback

This component combines well with react-use-async-callback to avoid writing lots of boilerplate for your async callbacks, as shown here:

Typescript

import { ButtonAsync } from 'reactstrap-buttonasync';
import { useAsyncCallback } from 'react-use-async-callback';

export const Example = (props: any) => {
	const [calculate, isCalculating] = useAsyncCallback(async (event: React.FormEvent<HTMLButtonElement>) => {
		setIsCalculating(true);
        // Do real calcualting or REST call here.
		setIsCalculating(false);
    }, []); 

	return (
			<>
				<ButtonAsync color="primary" isExecuting={isCalculating} onClick={calculate}
					executingChildren={<><FontAwesomeIcon icon="spinner" spin /> Calculating...</>}>
					<FontAwesomeIcon icon="calculator" /> Calculate
				</ButtonAsync>
            </>
    );
};

Javascript

import { ButtonAsync } from 'reactstrap-buttonasync';
import { useAsyncCallback } from 'react-use-async-callback';

export const Example = (props) => {
	const [calculate, isCalculating] = useAsyncCallback(async (event) => {
		setIsCalculating(true);
        // Do real calcualting or REST call here.
		setIsCalculating(false);
    }, []); 

	return (
			<>
				<ButtonAsync color="primary" isExecuting={isCalculating} onClick={calculate}
					executingChildren={<><FontAwesomeIcon icon="spinner" spin /> Calculating...</>}>
					<FontAwesomeIcon icon="calculator" /> Calculate
				</ButtonAsync>
            </>
    );
};

Typescript

This package is written in typescript and comes with its own bindings.

License

Licensed under the MIT license.