Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-bootstrap-button

chewhx77MIT1.0.3TypeScript support: included

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

bootstrap, react-bootstrap, react, button, frontend, react-state, react-button

readme

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

  1. 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.

  1. 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;
};

License

MIT Licence

References