Theme

Choreography
npm_versionnpm Paragon package page

Manages a transition when replacing content. By default, this component will transition the height and do a cross-fade. The transition can be customized.

TransitionReplace expects only one child at any time. Swap content inside the component (usually based on some state).

Basic usage

Any Paragon component or export may be added to the code example.

IMPORTANT NOTE: You must provide the key prop for all children, even when only rendering a single item. This is how React will determine that a child is new rather than just updated.

Custom Transition

TransitionReplace uses CSSTransition from the ReactTransitionGroup package. The transitionClassNames prop is a pass-through to CSSTransitions's classNames prop. You can use this to change the crossfade animation. By default this value is pgn__transition-replace and the cross-fade is defined as below:

.pgn__transition-replace-enter {
opacity: 0;
}
.pgn__transition-replace-enter-active {
opacity: 1;
z-index: 1;
transition: opacity 300ms ease;
}
.pgn__transition-replace-exit {
opacity: 1;
}
.pgn__transition-replace-exit-active {
opacity: 0;
transition: opacity 300ms ease;
}

If you change the timing in CSS you should also match it using the enterDuration and exitDuration props.

Note:

Children are not required. When this component is empty, the a child inserted into it will not transition the height (from zero). No "replacement" transition will occur and new content will pop in like a normal insert. This behaviour makes it easier to work with asyncronously loaded content (for example: during the first load you don't have to do any special handling).

Custom transition example usage

Any Paragon component or export may be added to the code example.

Props API#

TransitionReplace Props API
  • children element

    Specifies an additional class for the base element

  • enterDuration number

    Duration of the element appearance transition.

    Default300
  • exitDuration number

    Duration of the element dismiss transition.

    Default300
  • className string

    Specifies class name to append to the base element.

  • onChildEnter func

    A Transition callback fired immediately after the enter or appear class is applied.

  • onChildEntering func

    A Transition callback fired immediately after the enter-active or appear-active class is applied.

  • onChildEntered func

    A Transition callback fired immediately after the enter or appear classes are removed and the done class is added to the DOM node.

  • onChildExit func

    A Transition callback fired immediately after the exit class is applied.

  • onChildExiting func

    A Transition callback fired immediately after the exit-active is applied.

  • onChildExited func

    A Transition callback fired immediately after the exit classes are removed and the exit-done class is added to the DOM node.

  • transitionStyles shape {
    entering: shape {},
    entered: shape {},
    exiting: shape {},
    exited: shape {},
    }

    An object that specifies transition styles.

    Default{}
  • transitionClassNames string

    Specifies class name to append to the Transition.

    Default'pgn__transition-replace'

Usage Insights#

TransitionReplace

Project NameParagon VersionInstance Count
frontend-app-account22.10.01
frontend-app-admin-portal21.13.11
frontend-app-authn22.10.01
frontend-app-course-authoring22.8.118
teams22.8.11
xpert_unit_summary22.8.11
frontend-app-discussions22.7.01
frontend-app-learner-portal-enterprise21.13.12
frontend-app-learning22.10.01
frontend-app-profile22.10.01
frontend-app-support-tools21.13.15