TransitionReplace
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#
- children
element
Specifies an additional class for the base element
- enterDuration
number
Default300Duration of the element appearance transition.
- exitDuration
number
Default300Duration of the element dismiss transition.
- className
string
Specifies class name to append to the base element.
- onChildEnter
func
A
Transition
callback fired immediately after theenter
orappear
class is applied. - onChildEntering
func
A
Transition
callback fired immediately after theenter-active
orappear-active
class is applied. - onChildEntered
func
A
Transition
callback fired immediately after theenter
orappear
classes are removed and the done class is added to the DOM node. - onChildExit
func
A
Transition
callback fired immediately after theexit
class is applied. - onChildExiting
func
A
Transition
callback fired immediately after theexit-active
is applied. - onChildExited
func
A
Transition
callback fired immediately after theexit
classes are removed and the exit-done class is added to the DOM node. - transitionStyles
shape
{entering:shape
{},entered:shape
{},exiting:shape
{},exited:}shape
{},Default{}An object that specifies transition styles.
- transitionClassNames
string
Default'pgn__transition-replace'Specifies class name to append to the
Transition
.
Usage Insights#
TransitionReplace
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-account | 22.10.0 | 1 | |
frontend-app-admin-portal | 21.13.1 | 1 | |
frontend-app-authn | 22.10.0 | 1 | |
frontend-app-course-authoring | 22.8.1 | 18 | |
teams | 22.8.1 | 1 | |
xpert_unit_summary | 22.8.1 | 1 | |
frontend-app-discussions | 22.7.0 | 1 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 2 | |
frontend-app-learning | 22.10.0 | 1 | |
frontend-app-profile | 22.10.0 | 1 | |
frontend-app-support-tools | 21.13.1 | 5 |