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

2.Import package to the React Component

const { CSSTransition, TransitionGroup } = ReactTransitionGroup;

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>
)

That's it!

Implementations

Articles

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

• My blog-posts for software developing: https://medium.com/a-layman
• My website: https://www.alayman.io/
• Facebook page: https://www.facebook.com/imalayman