React Bootstrap — Alerts

Image for post
Image for post
Photo by Daniel Roberts on Unsplash

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to work with React Bootstrap’s alerts in our React components.

Alerts

Alerts provide us with feedback for user actions with various styling.

For instance, we can write:

to display all varieties of alerts.

Also, we can add Alert.Link components to add links to the alerts.

For example, we can write:

We used the Alert.Link component to add a link with a href to go to a URL.

Additional Content

We can also add whatever content we want.

There’s the Alert.Heading component to add a heading to the alert.

And the content can come below it.

For example, we can write:

We added an alert with a heading in the Alert.Heading component and some paragraphs below it.

Dismissing Alerts

We can make alerts dismissible with the dismissible prop.

For instance, we can write:

We added the show state to show the alert if it’s true .

And we have a Button to make show true when clicked.

The dismissible on the Alert lets us close the alert.

The onClose prop takes a callback that lets us close the alert by setting the show state to false .

It’ll be run when the close button on the alert is clicked.

This is shown since we added the dismissble prop.

Image for post
Image for post
Photo by Pascal Mauerhofer on Unsplash

Conclusion

Alerts are boxes that let us show messages triggered by user actions.

We can show whatever we want in them and there’re several varieties of them.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store