React-bootstrap components usage with example projects

These will be a series of Blogposts starting from Alerts to Toasts usages for React-bootstrap components.

Here I will be explaining about react-bootstrap components usage with all the props of each component in detail.

Alerts:

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. — from react-bootstrap

I will start with Alerts in React-bootstrap. Below code shows an example of how a basic alert will look like and it can be applied to any length of text, it is similar to bootstrap alerts.

<Alert variant='primary' show={true}>
This is a primary alert check it out!!
</Alert>

By default ‘show’ attribute will be “true” and we can add many attributes to <Alert>. There are many variants which can be used according to our needs.

Below is the list of variants for Alerts

['primary', 'secondary', 'success', 'danger', 'info', 'warning', 'light', 'dark']

Dismissing an alert with close button

We can dismiss the Alert by using onClose property on Alert component, below is the usage for dismissing Alert

AlertsAPI.js

Note: Add import bootstrap css to index.js file in your project

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

Including css transitions for Alerts:

Following code shows an example of how the Alerts Toggle look like with the CSS transition group.

First we need to install ‘react-transition-group’ using npm install and apply CSS transitions to our Alerts.

npm i react-transition-group --save

Alert Transitions

Github link for the projects:

minioncoder/React-bootstrap-Component-Usages

References: https://react-bootstrap.github.io/components/alerts/

References: https://toggen.com.au/blog/it-tips/enter-animation-of-bootstrap-alert-fails-using-reactstrap-alert-component