Fade List Items - React-transition-group Typing CST Test

Fade List Items — React-transition-group Code

Fades items in a list

# react_transition_group/demo/App5.jsx
import React, { useState } from 'react'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import './styles.css'

function App() {
	const [items, setItems] = useState([])
	return (
		<div>
		<button onClick={() => setItems([...items, `Item ${items.length+1}`])}>Add Item</button>
		<TransitionGroup>
		{items.map(item => (
		<CSSTransition key={item} timeout={300} classNames="fade">
		<div className="list-item">{item}</div>
		</CSSTransition>
		))}
		</TransitionGroup>
		</div>
	)
}

export default App

React-transition-group Language Guide

React Transition Group (RTG) is a lightweight animation utility for React that enables transitions when components enter, exit, or change state. It provides simple APIs such as CSSTransition, Transition, SwitchTransition, and TransitionGroup to orchestrate animations without dictating animation styles or mechanics.

More React-transition-group Typing Exercises

Practice Other Languages