TransitionGroup

The <TransitionGroup> component manages a set of transition components (<Transition> and <CSSTransition>) in a list. Like with the transition components, <TransitionGroup> is a state machine for managing the mounting and unmounting of components over time.

Consider the example below. As items are removed or added to the TodoList the in prop is toggled automatically by the <TransitionGroup>.

Note that <TransitionGroup> does not define any animation behavior! Exactly how a list item animates is up to the individual transition component. This means you can mix and match animations across different list items.

Example

Props

component

<TransitionGroup> renders a <div> by default. You can change this behavior by providing a component prop. If you use React v16+ and would like to avoid a wrapping <div> element you can pass in component={null}. This is useful if the wrapping div borks your css styles.

type: any
default: 'div'

children

A set of <Transition> components, that are toggled in and out as they leave. the <TransitionGroup> will inject specific transition props, so remember to spread them through if you are wrapping the <Transition> as with our <Fade> example.

While this component is meant for multiple Transition or CSSTransition children, sometimes you may want to have a single transition child with content that you want to be transitioned out and in when you change it (e.g. routes, images etc.) In that case you can change the key prop of the transition child as you change its content, this will cause TransitionGroup to transition the child out and back in.

type: any

appear

A convenience prop that enables or disables appear animations for all children. Note that specifying this will override any defaults set on individual children Transitions.

type: boolean

enter

A convenience prop that enables or disables enter animations for all children. Note that specifying this will override any defaults set on individual children Transitions.

type: boolean

exit

A convenience prop that enables or disables exit animations for all children. Note that specifying this will override any defaults set on individual children Transitions.

type: boolean

childFactory

You may need to apply reactive updates to a child as it is exiting. This is generally done by using cloneElement however in the case of an exiting child the element has already been removed and not accessible to the consumer.

If you do need to update a child as it leaves you can provide a childFactory to wrap every child, even the ones that are leaving.

type: Function(child: ReactElement) -> ReactElement
default: (child) => child