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

Links

• Demo
• 📦 NPM
• 🗄️ Repo
• 🐙 GitHub
• 🖥️ Website

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.

2. Import bootstrap stylesheet in your App.js:

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

Usage

import{BootstrapButton}from'react-bootstrap-button';constComponent=()=>{// other code above...const[clicked,setClicked]=useState(false);consthandleClick=()=>setClicked(true);return(<BootstrapButtonvariant="danger"// You may include all react-bootstrap button propsclassName="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:

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

• React-Bootstrap Button Props
• React-Bootstrap Spinner Props

License

MIT Licence

References

• https://github.com/mantinedev/mantine/
• https://github.com/react-bootstrap/react-bootstrap
• https://javascript.plainenglish.io/the-practical-guide-to-start-react-testing-library-with-typescript-d386804a018