DEV Community

Cover image for Day 3 of #100DaysOfCode: Create transitions with React-transition-group
Jen-Hsuan Hsieh
Jen-Hsuan Hsieh

Posted on • Edited on

Day 3 of #100DaysOfCode: Create transitions with React-transition-group

#javascript #react #transition #100daysofcode

Introduction

It looks better if we add transitions when adding or removing items on the page. Today I tried to use React-transition-group for transitions.

Steps to use React-transition-group

  1. Install package or include CDN 
https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/4.3.0/react-transition-group.js
Enter fullscreen mode Exit fullscreen mode

2.Import package to the React Component

const { CSSTransition, TransitionGroup } = ReactTransitionGroup;
Enter fullscreen mode Exit fullscreen mode

3.Wrap the component with TransitionGroup and CSSTransition

return ( <div className="container menu-container"> <div className="row"> products.map(product => ( <TransitionGroup> <CSSTransition key={product.id} timeout={500} classNames="item"> <MenuItem product = {product} />  </CSSTransition>  </TransitionGroup>  ))} </div>  </div> )
Enter fullscreen mode Exit fullscreen mode

That's it!

Implementations

Articles

There are some of my articles. Feel free to check if you like!

Top comments (0)