illustration for Create Smooth, Performant Transitions with React Transition Group v2

Course

Create Smooth, Performant Transitions with React Transition Group v2

1
Course Overview: Create Smooth, Performant Transitions with React Transition Group v2
1m 4s
2
Transition a React Component using CSS with RTG’s `CSSTransition` component
7m 10s
3
Show React Transition Group Elements with an Initial Transition with the `appear` Prop
1m 32s
4
Disable RTG enter and/or exit Transitions using the `enter`, and `exit` Props
1m 10s
5
Fine-tune Transitions with React Transition Group’s Lifecycle Props
2m 55s
6
Transition Items within a List with React Transition Group
4m 40s
7
Render a Different HTML Element as the `<TransitionGroup>` Container Element
1m 29s
8
Transition between Pages with React Transition Group and React Router
7m 8s
9
Write Transitions with React Transition Group using JSS
3m 31s
10
Use React Transition Group alongside the Styled Components library
3m 1s

Render a Different HTML Element as the `<TransitionGroup>` Container Element

Rory Smith

InstructorRory Smith

React^16.0.0

Share this video with your friends

In React Transition Group, the <TransitionGroup> component uses a standard <div> as its container element. This can be changed to whichever HTML element you like. This can be very important for accessibility and maintaining DOM readability. We can also pass null as the component, which means no container element is used at all. This can be important for styling.