Enter animation of Bootstrap Alert fails using reactstrap Alert component

Written by James McDonald

January 1, 2019

I have been using CSSTransiton from react-transtion-group to animate the show and hiding of various elements on a page. I successfully added a few items and then tried to add a bootstrap alert and then the enter animation failed to fire. Here is an example of the problem I created on codesandbox

I traced the problem to the reactstrap Alert component

When you add the component it will by default add the CSS classes to do a fadeOut animation. From the docs regarding bootstrap alerts:

To animate alerts when dismissing them, be sure to add the .fade and .show classes.

https://getbootstrap.com/docs/4.1/components/alerts/
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

The reactstrap components seem to include the “show” class even when you set the prop fade={false} to turn the hide fade transition off

I found a work-a-round which involves setting the transition prop to blank out the “show” class: transition={{ baseClassActive: “” }}

import React from "react";
import Alert from "reactstrap/lib/Alert";
import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { CSSTransition } from "react-transition-group";
// bootstrap.css is included from the root App.js component
import "../Styles/styles.css";

import {
    faExclamationCircle,
    faCheckCircle,
    faCheck,
    faThumbsUp,
    faQuestion,
    faQuestionCircle,
    faExclamationTriangle
} from "@fortawesome/free-solid-svg-icons";

library.add([
    faExclamationCircle,
    faCheckCircle,
    faCheck,
    faThumbsUp,
    faQuestion,
    faQuestionCircle,
    faExclamationTriangle
]);

const icons = color => {
    let icon = null;
    switch (color) {
        case "primary":
        case "secondary":
        case "success":
            icon = "thumbs-up";
            break;
        case "danger":
        case "warning":
            icon = "exclamation-triangle";
            break;
        case "info":
        case "light":
        case "dark":
        default:
            icon = "exclamation-circle";
    }
    return icon;
};
const AlertMessage = props => {
    let icon = icons(props.color);
    return (
        <CSSTransition
            in={props.show}
            timeout={300}
            classNames="toggen"
            unmountOnExit
        >
            <Alert
                transition={{ baseClassActive: "" }}
                color={props.color}
                fade={false}
            >
                <FontAwesomeIcon icon={icon} /> {props.message}
            </Alert>
        </CSSTransition>
    );
};

export default AlertMessage;

The versions that I am using:

  • react 16.7.0
  • react-transition-group 2.5.2
  • reactstrap 6.5.0

Just thought I would post this in the hope it would help someone else scratching their head regarding why their CSS Transitions and/or Animations were failing to work

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.

You May Also Like…

Ubuntu on Hyper-v

It boils town to installing linux-azure # as root or sudo apt-get update apt-get install linux-azure...