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 with data-bs-dismiss="alert" is clicked, also the alert-dismissible class is added to the class list.
• onClose - callback called when the alert is being dismissed
• onClosed - callback called when the alert is dismissed (after fade transition if animated)
• force-close - simulates the click event externally.