How to use react-transition-group - 10 common examples

// polyfill for Object.entries
import entries from "object.entries"
if (!Object.entries) {
  entries.shim()
}

import fetchMock from "fetch-mock"
// Mock react-transition-group which is used by material-ui. It causes test failures due to a callback timed to
// occur after the test has already cleaned up the DOM elements.
const FakeTransition = ({ children }) => children()
const FakeCSSTransition = props =>
  props.in ? {props.children} : null
// adapted from https://testing-library.com/docs/example-react-transition-group
ReactTransitionGroup.Transition = FakeTransition
ReactTransitionGroup.CSSTransition = FakeCSSTransition

// eslint-disable-next-line mocha/no-top-level-hooks
beforeEach(() => {
  // Uncomment to diagnose stray API calls. Also see relevant block in afterEach
  /*
  fetchMock.restore();
  fetchMock.catch((...args) => {
    console.log("ERROR: Unmatched request: ", args);
    console.trace();
    process.exit(1);
  });
  */
})

// cleanup after each test run
// eslint-disable-next-line mocha/no-top-level-hooks

global.SETTINGS = _createSettings()

// polyfill for Object.entries
import entries from "object.entries"
if (!Object.entries) {
  entries.shim()
}

import fetchMock from "fetch-mock"
// Mock react-transition-group which is used by material-ui. It causes test failures due to a callback timed to
// occur after the test has already cleaned up the DOM elements.
const FakeTransition = ({ children }) => children()
const FakeCSSTransition = props =>
  props.in ? {props.children} : null
// adapted from https://testing-library.com/docs/example-react-transition-group
ReactTransitionGroup.Transition = FakeTransition
ReactTransitionGroup.CSSTransition = FakeCSSTransition

// eslint-disable-next-line mocha/no-top-level-hooks
beforeEach(() => {
  // Uncomment to diagnose stray API calls. Also see relevant block in afterEach
  /*
  fetchMock.restore();
  fetchMock.catch((...args) => {
    console.log("ERROR: Unmatched request: ", args);
    console.trace();
    process.exit(1);
  });
  */
})

// cleanup after each test run

value: function componentDidUpdate() {
      // Animate fade on mount/unmount
      var duration = 200;
      var styles = '\n\t\t\t\t.fade-enter { opacity: 0.01; }\n\t\t\t\t.fade-enter.fade-enter-active { opacity: 1; transition: opacity ' + duration + 'ms; }\n\t\t\t\t.fade-leave { opacity: 1; }\n\t\t\t\t.fade-leave.fade-leave-active { opacity: .01; transition: opacity ' + duration + 'ms; }\n\t\t';

      (0, _reactDom.render)(_react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          'style',
          null,
          styles
        ),
        _react2.default.createElement(
          _reactTransitionGroup.TransitionGroup,
          this.props,
          _react2.default.createElement(
            _reactTransitionGroup.CSSTransition,
            { timeout: { enter: duration, exit: duration }, className: 'fade' },
            this.props.children
          )
        )
      ), this.portalElement);
    }
  }, {

var TransitionTimeouts = Util.TransitionTimeouts,
    TransitionPropTypeKeys = Util.TransitionPropTypeKeys,
    TransitionStatuses = Util.TransitionStatuses,
    pick = Util.pick,
    omit = Util.omit;

var propTypes$2 = _extends({}, Transition.propTypes, {
  // eslint-disable-line react/forbid-foreign-prop-types
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  className: PropTypes.string,
  active: PropTypes.bool,
  onToggle: PropTypes.func
});

var defaultProps$2 = _extends({}, Transition.defaultProps, {
  timeout: TransitionTimeouts.Collapse,
  tag: 'div'
});

var transitionStatusToClassHash = (_transitionStatusToCl = {}, _transitionStatusToCl[TransitionStatuses.ENTERING] = 'collapsing', _transitionStatusToCl[TransitionStatuses.ENTERED] = 'collapse show', _transitionStatusToCl[TransitionStatuses.EXITING] = 'collapsing', _transitionStatusToCl[TransitionStatuses.EXITED] = 'collapse', _transitionStatusToCl);

function getTransitionClass(status) {
  return transitionStatusToClassHash[status] || 'collapse';
}

function getHeight(node) {
  return node.scrollHeight;
}

var AccordionBody =
/*#__PURE__*/

export const propTypes = {
  ...Transition.propTypes, // eslint-disable-line react/forbid-foreign-prop-types
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]),
  tag: PropTypes.any,
  baseClass: PropTypes.string,
  baseClassActive: PropTypes.string,
  className: PropTypes.string,
  cssModule: PropTypes.object,
};

export const defaultProps = {
  ...Transition.defaultProps,
  tag: 'div',
  baseClass: 'fade',
  baseClassActive: 'show',
  timeout: 150,
  appear: true,
  enter: true,
  exit: true,
  in: true,
};

function Fade(props) {
  const {
    tag: Tag,
    baseClass,
    baseClassActive,
    className,

const propTypes = {
  ...Transition.propTypes, // eslint-disable-line react/forbid-foreign-prop-types
  isOpen: PropTypes.bool,
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node
  ]),
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  className: PropTypes.node,
  navbar: PropTypes.bool,
  cssModule: PropTypes.object
}

const defaultProps = {
  ...Transition.defaultProps,
  isOpen: false,
  appear: false,
  enter: true,
  exit: true,
  tag: 'div',
  timeout: TransitionTimeouts.Collapse
}

const transitionStatusToClassHash = {
  [TransitionStatuses.ENTERING]: 'collapsing',
  [TransitionStatuses.ENTERED]: 'collapse show',
  [TransitionStatuses.EXITING]: 'collapsing',
  [TransitionStatuses.EXITED]: 'collapse'
}

function getTransitionClass(status) {

} = Util

const propTypes = {
  ...Transition.propTypes, // eslint-disable-line react/forbid-foreign-prop-types
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node
  ]),
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  className: PropTypes.string,
  onClose: PropTypes.func,
  isOpen: PropTypes.bool
}

const defaultProps = {
  ...Transition.defaultProps,
  timeout: TransitionTimeouts.Collapse,
  tag: 'div'
}

const transitionStatusToClassHash = {
  [TransitionStatuses.ENTERING]: 'navbar-collapsable d-block',
  [TransitionStatuses.ENTERED]: 'navbar-collapsable d-block expanded',
  [TransitionStatuses.EXITING]: 'navbar-collapsable d-block',
  [TransitionStatuses.EXITED]: 'navbar-collapsable'
}

const defaultStyle = {
  transition: '400ms ease-in-out',
  transitionProperty: 'opacity'
}

} = Util

const propTypes = {
  ...Transition.propTypes, // eslint-disable-line react/forbid-foreign-prop-types
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node
  ]),
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  className: PropTypes.string,
  active: PropTypes.bool,
  onToggle: PropTypes.func
}

const defaultProps = {
  ...Transition.defaultProps,
  timeout: TransitionTimeouts.Collapse,
  tag: 'div'
}

const transitionStatusToClassHash = {
  [TransitionStatuses.ENTERING]: 'collapsing',
  [TransitionStatuses.ENTERED]: 'collapse show',
  [TransitionStatuses.EXITING]: 'collapsing',
  [TransitionStatuses.EXITED]: 'collapse'
}

function getTransitionClass(status) {
  return transitionStatusToClassHash[status] || 'collapse'
}

function getHeight(node) {

import PropTypes from 'prop-types'
import classNames from 'classnames'
import Transition from 'react-transition-group/Transition'

import { Util } from 'reactstrap'

const {
  TransitionTimeouts,
  TransitionPropTypeKeys,
  TransitionStatuses,
  pick,
  omit
} = Util

const propTypes = {
  ...Transition.propTypes, // eslint-disable-line react/forbid-foreign-prop-types
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node
  ]),
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  className: PropTypes.string,
  active: PropTypes.bool,
  onToggle: PropTypes.func
}

const defaultProps = {
  ...Transition.defaultProps,
  timeout: TransitionTimeouts.Collapse,
  tag: 'div'
}

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Transition from 'react-transition-group/Transition'

import { Util, Button } from 'reactstrap'

const {
  TransitionTimeouts,
  TransitionPropTypeKeys,
  TransitionStatuses,
  pick,
  omit
} = Util

const propTypes = {
  ...Transition.propTypes, // eslint-disable-line react/forbid-foreign-prop-types
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node
  ]),
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  className: PropTypes.string,
  onClose: PropTypes.func,
  isOpen: PropTypes.bool
}

const defaultProps = {
  ...Transition.defaultProps,
  timeout: TransitionTimeouts.Collapse,
  tag: 'div'
}