Getting Started with Reactstrap and Alerts

Reactstrap is a version Bootstrap made for React.

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

In this article, we’ll look at how to get started with Reactstrap and display alerts.

Getting started

We can install Reactstrap by running:

npm install --save reactstrap

Then we can import the components we need.

We also need to install Bootstrap since the Bootstrap CSS isn’t included.

So we can write:

npm install --save bootstrap

Then we can import it by writing:

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

Alerts

We can add alerts with the Alert component.

For instance, we can write:

import React from "react";
import { Alert } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Alert color="primary">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
      <Alert color="secondary">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
      <Alert color="success">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
      <Alert color="danger">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
      <Alert color="warning">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
      <Alert color="info">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
      <Alert color="light">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
      <Alert color="dark">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
    </div>
  );
}

We have the Alert component with the color prop to set the color.

className has the color for the link.

Additional Content for Alerts

We can add extra content to alerts.

For example, we can write:

import React from "react";
import { Alert } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Alert color="primary">
        <h4 className="alert-heading">title</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut arcu
          lacinia, condimentum sapien et, molestie eros. Nulla a molestie ante,
          vitae scelerisque odio. Integer ipsum quam, viverra quis ipsum
          dapibus,
        </p>
        <hr />
        <p className="mb-0">
          Fusce vitae eros varius, consequat mi at, consequat urna. Sed egestas
          nisl quis magna rutrum tincidunt ac eu tortor.
        </p>
      </Alert>
    </div>
  );
}

We added p and hr elements to our alert.

mb-0 removes the bottom margin.

Dismissing Alerts

We can make alerts dismissible by making them controlled components.

For instance, we can write:

import React from "react";
import { Alert } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [visible, setVisible] = React.useState(true);

  const onDismiss = () => setVisible(false);

  return (
    <div className="App">
      <Alert color="info" isOpen={visible} toggle={onDismiss}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </Alert>
    </div>
  );
}

We have the visible state to toggle the alert on or off.

It’s passed into the isOpen prop to toggle the alert.

toggle has the onDismiss function to set visible to false to make the alert disappear.

The close button is shown and we can click it to call onDismiss .

Uncontrolled Alerts

We can make dismissible alerts without making them uncontrolled.

To do that, we can import the UncontrolledAlert component.

For instance, we can write:

import React from "react";
import { UncontrolledAlert } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <UncontrolledAlert color="info">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </UncontrolledAlert>
    </div>
  );
}

Now we don’t need the state change logic that we had before.

Alerts without Fade

By default, the alert has the fade transition effect.

To disable the fade effect, we can set the fade prop to false :

import React from "react";
import { Alert } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [visible, setVisible] = React.useState(true);

  const onDismiss = () => setVisible(false);

  return (
    <div className="App">
      <Alert color="primary" isOpen={visible} toggle={onDismiss} fade={false}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </Alert>
    </div>
  );
}

We added the prop in the controlled alert.

Also, we can do the same with uncontrolled alerts:

import React from "react";
import { UncontrolledAlert } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <UncontrolledAlert color="info" fade={false}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </UncontrolledAlert>
    </div>
  );
}

Conclusion

We can install the Reactstrap and Bootstrap packages to add Reactstrap to our app.

Also, we can use alerts to display notifications.