TransitionGroup

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

Consider the example below using the Fade CSS transition from before. As items are removed or added to the TodoList the in prop is toggled automatically by the <TransitionGroup>. You can use any <Transition> component in a <TransitionGroup>, not just css.

Example

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

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.

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