React-bootstrap-button NPM

React-Bootstrap-Button

This is a quick save for anyone looking to add a loading button for Bootstrap in React.

Note: You must install peer dependency bootstrap and import the bootstrap stylesheet

Installation

Install the package and bootstrap

npm install react-bootstrap-button bootstrap

For other installation methods of bootstrap styles, refer to guides from the official bootstrap documentation.

Import bootstrap stylesheet in your App.js:

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

Usage

import { BootstrapButton } from 'react-bootstrap-button';

const Component = () => {
	// other code above...

	const [clicked, setClicked] = useState(false);
	const handleClick = () => setClicked(true);

	return (
		<BootstrapButton
			variant="danger"
      // You may include all react-bootstrap button props
			className="m-4".
			isLoading={clicked}
			loadingMessage="This button is loading..."
			onClick={handleClick}
		>
			Click me
		</BootstrapButton>
	);

	// other code below...
};

API

Properties for <BootstrapButton> includes those from React-Bootstrap Button and the following:

type BootstrapButton = {
	isLoading?: boolean;
	isDisabled?: boolean;
	spinnerPosition?: 'left' | 'right';
	spinnerProps?: SpinnerProps; // see React Spinner Props Api
	loadingMessage?: string;
	leftIcon?: ReactElement;
};