DEV Community 👩‍💻👨‍💻

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

Posted on

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

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)

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠