@albanian-xrm/bootstrap-alert
v0.1.5
Published
React based Boostrap Alert component
Downloads
3
Readme
React based Bootstrap Alert
This is react based component for the Bootstrap 5 Alert.
Installation
Using npm:
npm install @albanian-xrm/bootstrap-alert
Using yarn:
yarn add @albanian-xrm/bootstrap-alert
Note: react
and bootstrap
are peer dependencies
Usage
The package comes in two flavours, CommonsJS
and ES Modules
so you can require or import the package as necessary.
The component renders a div
element with the class alert
added to the specified className
Example
This simple example:
import React from 'react'
import Alert from '@albanian-xrm/bootstrap-alert'
const App = ()=>(
<Alert dismissible animate className="fade show">
This is a dismissible alert. With animation.
<button className="btn-close" data-bs-dismiss="alert" />
</Alert>
)
export default App
will produce the following HTML
:
<div class="fade show alert alert-dismissible">
This is a dismissible alert. With animation.
<button class="btn-close" data-bs-dismiss="alert" title="x"></button>
</div>
Configuration
The following props can be used to configure the component:
animate
- animates the show and fade transitions.dismissible
- attaches on click event which dismisses the alert if an element withdata-bs-dismiss="alert"
is clicked, also thealert-dismissible
class is added to the class list.onClose
- callback called when the alert is being dismissedonClosed
- callback called when the alert is dismissed (after fade transition if animated)force-close
- simulates the click event externally.