https://github.com/chewhx/react-bootstrap-button
Easily add a loading button for Bootstrap in React
https://github.com/chewhx/react-bootstrap-button
bootstrap button frontend react react-bootstrap react-button react-state
Last synced: 11 months ago
JSON representation
Easily add a loading button for Bootstrap in React
- Host: GitHub
- URL: https://github.com/chewhx/react-bootstrap-button
- Owner: chewhx
- Created: 2022-03-22T13:38:21.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-09-01T01:49:00.000Z (over 3 years ago)
- Last Synced: 2025-02-21T00:21:50.903Z (11 months ago)
- Topics: bootstrap, button, frontend, react, react-bootstrap, react-button, react-state
- Language: TypeScript
- Homepage: https://chewhx.github.io/react-bootstrap-button
- Size: 2.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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](https://www.npmjs.com/package/bootstrap) and import the bootstrap stylesheet**
## Links
- [Demo](https://chewhx.github.io/react-bootstrap-button)
- 📦 [NPM](https://www.npmjs.com/package/react-bootstrap-button)
- 🗄️ [Repo](https://github.com/chewhx/react-bootstrap-button)
- 🐙 [GitHub](https://github.com/chewhx)
- 🖥️ [Website](https://www.chewhx.com)
## Installation
1. Install the package and bootstrap
```bash
npm install react-bootstrap-button bootstrap
```
For other installation methods of bootstrap styles, refer to guides from the [official bootstrap documentation](https://getbootstrap.com/docs/5.1/getting-started/introduction/).
2. Import bootstrap stylesheet in your App.js:
```javascript
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
```
## Usage
```javascript
import { BootstrapButton } from 'react-bootstrap-button';
const Component = () => {
// other code above...
const [clicked, setClicked] = useState(false);
const handleClick = () => setClicked(true);
return (
Click me
);
// other code below...
};
```
## API
Properties for `` includes those from React-Bootstrap Button and the following:
```typescript
type BootstrapButton = {
isLoading?: boolean;
isDisabled?: boolean;
spinnerPosition?: 'left' | 'right';
spinnerProps?: SpinnerProps; // see React Spinner Props Api
loadingMessage?: string;
leftIcon?: ReactElement;
};
```
- [React-Bootstrap Button Props](https://react-bootstrap.github.io/components/buttons/#button-props)
- [React-Bootstrap Spinner Props](https://react-bootstrap.github.io/components/spinners/#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