Something this simple should be easily accomplished, yet I'm pulling my hair out over how complicated it is.
All I want to do is animate the mounting & unmounting of a React component, that's it. Here's what I've tried so far and why each solution won't work:
ReactCSSTransitionGroup - I'm not using CSS classes at all, it's all JS styles, so this won't work.
ReactTransitionGroup - This lower level API is great, but it requires you to use a callback when the animation is complete, so just using CSS transitions won't work here. There are always animation libraries, which leads to the next point:
GreenSock - The licensing is too restrictive for business use IMO.
React Motion - This seems great, but TransitionMotion is extremely confusing and overly complicated for what I need.
Of course I can just do trickery like Material UI does, where the elements are rendered but remain hidden (left: -10000px) but I'd rather not go that route. I consider it hacky, and I want my components to unmount so they clean up and are not cluttering up the DOM.
I want something that's easy to implement. On mount, animate a set of styles; on unmount, animate the same (or another) set of styles. Done. It also has to be high performance on multiple platforms.
I've hit a brick wall here. If I'm missing something and there's an easy way to do this, let me know.
This is a bit lengthy but I've used all the native events and methods to achieve this animation. No ReactCSSTransitionGroup, ReactTransitionGroup and etc.
Things I've used
React lifecycle methods
onTransitionEnd event
How this works
Mount the element based on the mount prop passed(mounted) and with default style(opacity: 0)
After mount or update, use componentDidMount (componentWillReceiveProps for further updates)to change the style (opacity: 1) with a timeout(to make it async).
During unmount, pass a prop to the component to identify unmount, change the style again(opacity: 0), onTransitionEnd, remove unmount the element from the DOM.
Continue the cycle.
Go through the code, you'll understand. If any clarification is needed, please leave a comment.
class App extends React.Component{
constructor(props) {
super(props)
this.transitionEnd = this.transitionEnd.bind(this)
this.mountStyle = this.mountStyle.bind(this)
this.unMountStyle = this.unMountStyle.bind(this)
this.state ={ //base css
show: true,
style :{
fontSize: 60,
opacity: 0,
transition: 'all 2s ease',
}
}
}
componentWillReceiveProps(newProps) { // check for the mounted props
if(!newProps.mounted)
return this.unMountStyle() // call outro animation when mounted prop is false
this.setState({ // remount the node when the mounted prop is true
show: true
})
setTimeout(this.mountStyle, 10) // call the into animation
}
unMountStyle() { // css for unmount animation
this.setState({
style: {
fontSize: 60,
opacity: 0,
transition: 'all 1s ease',
}
})
}
mountStyle() { // css for mount animation
this.setState({
style: {
fontSize: 60,
opacity: 1,
transition: 'all 1s ease',
}
})
}
componentDidMount(){
setTimeout(this.mountStyle, 10) // call the into animation
}
transitionEnd(){
if(!this.props.mounted){ // remove the node on transition end when the mounted prop is false
this.setState({
show: false
})
}
}
render() {
return this.state.show && <h1 style={this.state.style} onTransitionEnd={this.transitionEnd}>Hello</h1>
}
}
class Parent extends React.Component{
constructor(props){
super(props)
this.buttonClick = this.buttonClick.bind(this)
this.state = {
showChild: true,
}
}
buttonClick(){
this.setState({
showChild: !this.state.showChild
})
}
render(){
return <div>
<App onTransitionEnd={this.transitionEnd} mounted={this.state.showChild}/>
<button onClick={this.buttonClick}>{this.state.showChild ? 'Unmount': 'Mount'}</button>
</div>
}
}
ReactDOM.render(<Parent />, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
Here is my solution using the new hooks API (with TypeScript), based on this post, for delaying the component's unmount phase:
function useDelayUnmount(isMounted: boolean, delayTime: number) {
const [ shouldRender, setShouldRender ] = useState(false);
useEffect(() => {
let timeoutId: number;
if (isMounted && !shouldRender) {
setShouldRender(true);
}
else if(!isMounted && shouldRender) {
timeoutId = setTimeout(
() => setShouldRender(false),
delayTime
);
}
return () => clearTimeout(timeoutId);
}, [isMounted, delayTime, shouldRender]);
return shouldRender;
}
Usage:
const Parent: React.FC = () => {
const [ isMounted, setIsMounted ] = useState(true);
const shouldRenderChild = useDelayUnmount(isMounted, 500);
const mountedStyle = {opacity: 1, transition: "opacity 500ms ease-in"};
const unmountedStyle = {opacity: 0, transition: "opacity 500ms ease-in"};
const handleToggleClicked = () => {
setIsMounted(!isMounted);
}
return (
<>
{shouldRenderChild &&
<Child style={isMounted ? mountedStyle : unmountedStyle} />}
<button onClick={handleToggleClicked}>Click me!</button>
</>
);
}
CodeSandbox link.
I countered this problem during my work, and simple as it seemed, it is really not in React. In a normal scenario where you render something like:
this.state.show ? {childen} : null;
as this.state.show changes the children are mounted/unmounted right away.
One approach I took is creating a wrapper component Animate and use it like
<Animate show={this.state.show}>
{childen}
</Animate>
now as this.state.show changes, we can perceive prop changes with getDerivedStateFromProps(componentWillReceiveProps) and create intermediate render stages to perform animations.
We start with Static Stage when the children is mounted or unmounted.
Once we detect the show flag changes, we enter Prep Stage where we calculate necessary properties like height and width from ReactDOM.findDOMNode.getBoundingClientRect().
Then entering Animate State we can use css transition to change height, width and opacity from 0 to the calculated values (or to 0 if unmounting).
At the end of transition, we use onTransitionEnd api to change back to
Static stage.
There are much more details to how the stages transfer smoothly but this could be overall idea:)
If anyone interested, I created a React library https://github.com/MingruiZhang/react-animate-mount to share my solution. Any feedback welcome:)
Using the knowledge gained from Pranesh's answer, I came up with an alternate solution that's configurable and reusable:
const AnimatedMount = ({ unmountedStyle, mountedStyle }) => {
return (Wrapped) => class extends Component {
constructor(props) {
super(props);
this.state = {
style: unmountedStyle,
};
}
componentWillEnter(callback) {
this.onTransitionEnd = callback;
setTimeout(() => {
this.setState({
style: mountedStyle,
});
}, 20);
}
componentWillLeave(callback) {
this.onTransitionEnd = callback;
this.setState({
style: unmountedStyle,
});
}
render() {
return <div
style={this.state.style}
onTransitionEnd={this.onTransitionEnd}
>
<Wrapped { ...this.props } />
</div>
}
}
};
Usage:
import React, { PureComponent } from 'react';
class Thing extends PureComponent {
render() {
return <div>
Test!
</div>
}
}
export default AnimatedMount({
unmountedStyle: {
opacity: 0,
transform: 'translate3d(-100px, 0, 0)',
transition: 'opacity 250ms ease-out, transform 250ms ease-out',
},
mountedStyle: {
opacity: 1,
transform: 'translate3d(0, 0, 0)',
transition: 'opacity 1.5s ease-out, transform 1.5s ease-out',
},
})(Thing);
And finally, in another component's render method:
return <div>
<ReactTransitionGroup>
<Thing />
</ReactTransitionGroup>
</div>
Framer motion
Install framer-motion from npm.
import { motion, AnimatePresence } from "framer-motion"
export const MyComponent = ({ isVisible }) => (
<AnimatePresence>
{isVisible && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
/>
)}
</AnimatePresence>
)
I think using Transition from react-transition-group is probably the easiest way to track mounting/unmounting. It is incredibly flexible. I'm using some classes to show how easy it is to use but you can definitely hook up your own JS animations utilizing addEndListener prop - which I've had a lot of luck using GSAP with as well.
Sandbox: https://codesandbox.io/s/k9xl9mkx2o
And here's my code.
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Transition } from "react-transition-group";
import styled from "styled-components";
const H1 = styled.h1`
transition: 0.2s;
/* Hidden init state */
opacity: 0;
transform: translateY(-10px);
&.enter,
&.entered {
/* Animate in state */
opacity: 1;
transform: translateY(0px);
}
&.exit,
&.exited {
/* Animate out state */
opacity: 0;
transform: translateY(-10px);
}
`;
const App = () => {
const [show, changeShow] = useState(false);
const onClick = () => {
changeShow(prev => {
return !prev;
});
};
return (
<div>
<button onClick={onClick}>{show ? "Hide" : "Show"}</button>
<Transition mountOnEnter unmountOnExit timeout={200} in={show}>
{state => {
let className = state;
return <H1 className={className}>Animate me</H1>;
}}
</Transition>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
For those considering react-motion, animating a single component when it mounts and unmounts can be overwhelming to set up.
There's a library called react-motion-ui-pack that makes this process a lot easier to start with. It's a wrapper around react-motion, which means you get all the benefits from the library (i.e. you are able to interrupt the animation, have multiple unmounts happen at the same time).
Usage:
import Transition from 'react-motion-ui-pack'
<Transition
enter={{ opacity: 1, translateX: 0 }}
leave={{ opacity: 0, translateX: -100 }}
component={false}
>
{ this.state.show &&
<div key="hello">
Hello
</div>
}
</Transition>
Enter defines what the end state of the component should be; leave is the style that is applied when the component is unmounted.
You might find that once you have used the UI pack a couple of times, the react-motion library might not be as daunting anymore.
You can do this with React Transition Group. It gives you CSS classes, so you can write your animation code in those CSS classes.
Follow this simple example
import {CSSTransition } from 'react-transition-group';//This should be imported
import './AnimatedText.css';
const AnimatedText = () => {
const [showText, setShowText] = useState(false); //By default text will be not shown
//Handler to switch states
const switchHandler = () =>{
setShowText(!showText);
};
return (
//in : pass your state here, it will used by library to toggle. It should be boolean
//timeout: your amination total time(it should be same as mentioned in css)
//classNames: give class name of your choice, library will prefix it with it's animation classes
//unmountOnExit: Component will be unmounted when your state changes to false
<CSSTransition in={showText} timeout={500} classNames='fade' unmountOnExit={true}>
<h1>Animated Text</h1>
</CSSTransition>
<button onClick={switchHandler}>Show Text</button>
);
};
export default AnimatedText;
Now, let's write the animation in CSS file(AnimatedText.css), Remember classNames property(in this case fade)
//fade class should be prefixed
/*****Fade In effect when component is mounted*****/
//This is when your animation starts
fade-enter {
opacity: 0;
}
//When your animation is active
.fade-enter.fade-enter-active {
opacity: 1;
transition: all 500ms ease-in;
}
/*****Fade In effect when component is mounted*****/
/*****Fade Out effect when component is unmounted*****/
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0;
transition: all 500ms ease-out;
}
/*****Fade Out effect when component is unmounted*****/
There's also a appear class, which can be used when your component loads for the first time. Check documentation for more details
Animating enter and exit transitions is much easier with react-move.
example on codesandbox
Here my 2cents:
thanks to #deckele for his solution. My solution is based on his, it's the stateful's component version, fully reusable.
here my sandbox: https://codesandbox.io/s/302mkm1m.
here my snippet.js:
import ReactDOM from "react-dom";
import React, { Component } from "react";
import style from "./styles.css";
class Tooltip extends Component {
state = {
shouldRender: false,
isMounted: true,
}
shouldComponentUpdate(nextProps, nextState) {
if (this.state.shouldRender !== nextState.shouldRender) {
return true
}
else if (this.state.isMounted !== nextState.isMounted) {
console.log("ismounted!")
return true
}
return false
}
displayTooltip = () => {
var timeoutId;
if (this.state.isMounted && !this.state.shouldRender) {
this.setState({ shouldRender: true });
} else if (!this.state.isMounted && this.state.shouldRender) {
timeoutId = setTimeout(() => this.setState({ shouldRender: false }), 500);
() => clearTimeout(timeoutId)
}
return;
}
mountedStyle = { animation: "inAnimation 500ms ease-in" };
unmountedStyle = { animation: "outAnimation 510ms ease-in" };
handleToggleClicked = () => {
console.log("in handleToggleClicked")
this.setState((currentState) => ({
isMounted: !currentState.isMounted
}), this.displayTooltip());
};
render() {
var { children } = this.props
return (
<main>
{this.state.shouldRender && (
<div className={style.tooltip_wrapper} >
<h1 style={!(this.state.isMounted) ? this.mountedStyle : this.unmountedStyle}>{children}</h1>
</div>
)}
<style>{`
#keyframes inAnimation {
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
}
}
#keyframes outAnimation {
20% {
transform: scale(1.2);
}
100% {
transform: scale(0);
opacity: 0;
}
}
`}
</style>
</main>
);
}
}
class App extends Component{
render(){
return (
<div className="App">
<button onClick={() => this.refs.tooltipWrapper.handleToggleClicked()}>
click here </button>
<Tooltip
ref="tooltipWrapper"
>
Here a children
</Tooltip>
</div>
)};
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Here's how I solved this in 2019, while making a loading spinner. I'm using React functional components.
I have a parent App component that has a child Spinner component.
App has state for whether the app is loading or not. When the app is loading, Spinner is rendered normally. When the app is not loading (isLoading is false) Spinner is rendered with the prop shouldUnmount.
App.js:
import React, {useState} from 'react';
import Spinner from './Spinner';
const App = function() {
const [isLoading, setIsLoading] = useState(false);
return (
<div className='App'>
{isLoading ? <Spinner /> : <Spinner shouldUnmount />}
</div>
);
};
export default App;
Spinner has state for whether it's hidden or not. In the beginning, with default props and state, Spinner is rendered normally. The Spinner-fadeIn class animates it fading in. When Spinner receives the prop shouldUnmount it renders with the Spinner-fadeOut class instead, animating it fading out.
However I also wanted the component to unmount after fading out.
At this point I tried using the onAnimationEnd React synthetic event, similar to #pranesh-ravi's solution above, but it didn't work. Instead I used setTimeout to set the state to hidden with a delay the same length as the animation. Spinner will update after the delay with isHidden === true, and nothing will be rendered.
The key here is that the parent doesn't unmount the child, it tells the child when to unmount, and the child unmounts itself after it takes care of its unmounting business.
Spinner.js:
import React, {useState} from 'react';
import './Spinner.css';
const Spinner = function(props) {
const [isHidden, setIsHidden] = useState(false);
if(isHidden) {
return null
} else if(props.shouldUnmount) {
setTimeout(setIsHidden, 500, true);
return (
<div className='Spinner Spinner-fadeOut' />
);
} else {
return (
<div className='Spinner Spinner-fadeIn' />
);
}
};
export default Spinner;
Spinner.css:
.Spinner {
position: fixed;
display: block;
z-index: 999;
top: 50%;
left: 50%;
margin: -40px 0 0 -20px;
height: 40px;
width: 40px;
border: 5px solid #00000080;
border-left-color: #bbbbbbbb;
border-radius: 40px;
}
.Spinner-fadeIn {
animation:
rotate 1s linear infinite,
fadeIn .5s linear forwards;
}
.Spinner-fadeOut {
animation:
rotate 1s linear infinite,
fadeOut .5s linear forwards;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes rotate {
100% {
transform: rotate(360deg);
}
}
I was also in dire need of single component Animation . I tired using React Motion but i was pulling my hairs for such a trivial issue.. (i thing). After some googling i came across this post on their git repo . Hope it helps someone..
Referenced From & also the credit.
This works for me as of now. My use case was a modal to animate and unmount in case of load and unload.
class Example extends React.Component {
constructor() {
super();
this.toggle = this.toggle.bind(this);
this.onRest = this.onRest.bind(this);
this.state = {
open: true,
animating: false,
};
}
toggle() {
this.setState({
open: !this.state.open,
animating: true,
});
}
onRest() {
this.setState({ animating: false });
}
render() {
const { open, animating } = this.state;
return (
<div>
<button onClick={this.toggle}>
Toggle
</button>
{(open || animating) && (
<Motion
defaultStyle={open ? { opacity: 0 } : { opacity: 1 }}
style={open ? { opacity: spring(1) } : { opacity: spring(0) }}
onRest={this.onRest}
>
{(style => (
<div className="box" style={style} />
))}
</Motion>
)}
</div>
);
}
}
This can be done easily using the CSSTransition component from react-transition-group, which is just like the libraries you mentioned. The trick is you need to wrap the CSSTransition component without a show/hide mechanism like you typically would.i.e. {show && <Child>}... Otherwise you are hiding the animation and it won't work. Example:
ParentComponent.js
import React from 'react';
import {CSSTransition} from 'react-transition-group';
function ParentComponent({show}) {
return (
<CSSTransition classes="parentComponent-child" in={show} timeout={700}>
<ChildComponent>
</CSSTransition>
)}
ParentComponent.css
// animate in
.parentComponent-child-enter {
opacity: 0;
}
.parentComponent-child-enter-active {
opacity: 1;
transition: opacity 700ms ease-in;
}
// animate out
.parentComponent-child-exit {
opacity: 1;
}
.parentComponent-child-exit-active {
opacity: 0;
transition: opacity 700ms ease-in;
}
I know there are a lot of answers here, but I still did not find one that suits my needs. I want:
Functional components
A solution that'll allow my components to easily fade in/out when they're mounted/unmounted.
After many hours of fiddling, I have a solution that works I'd say 90%. I've written the limitation in a comment block in the code below. I'd still love a better solution, but this is the best I've found, including the other solutions here.
const TIMEOUT_DURATION = 80 // Just looked like best balance of silky smooth and stop delaying me.
// Wrap this around any views and they'll fade in and out when mounting /
// unmounting. I tried using <ReactCSSTransitionGroup> and <Transition> but I
// could not get them to work. There is one major limitation to this approach:
// If a component that's mounted inside of <Fade> has direct prop changes,
// <Fade> will think that it's a new component and unmount/mount it. This
// means the inner component will fade out and fade in, and things like cursor
// position in forms will be reset. The solution to this is to abstract <Fade>
// into a wrapper component.
const Fade: React.FC<{}> = ({ children }) => {
const [ className, setClassName ] = useState('fade')
const [ newChildren, setNewChildren ] = useState(children)
const effectDependency = Array.isArray(children) ? children : [children]
useEffect(() => {
setClassName('fade')
const timerId = setTimeout(() => {
setClassName('fade show')
setNewChildren(children)
}, TIMEOUT_DURATION)
return () => {
clearTimeout(timerId)
}
}, effectDependency)
return <Container fluid className={className + ' p-0'}>{newChildren}</Container>
}
If you have a component you want to fade in/out, wrap it in <Fade> Ex. <Fade><MyComponent/><Fade>.
Note that this uses react-bootstrap for the class names and for <Container/>, but both could be easily replaced with custom CSS and a regular old <div>.
If I use Velocity or AnimeJS library to animate node directly (instead of css or setTimeout), then I found out I can design a hook to provide the animation status on and function onToggle to kick off the animation (ex. slidedown, fade).
Basically what the hook does is to toggle on and off the animation, and afterwards update the on accordingly. Therefore we can get the status of the animation accurately. Without doing so would reply on a ad-hoc duration.
/**
* A hook to provide animation status.
* #class useAnimate
* #param {object} _ props
* #param {async} _.animate Promise to perform animation
* #param {object} _.node Dom node to animate
* #param {bool} _.disabled Disable animation
* #returns {useAnimateObject} Animate status object
* #example
* const { on, onToggle } = useAnimate({
* animate: async () => { },
* node: node
* })
*/
import { useState, useCallback } from 'react'
const useAnimate = ({
animate, node, disabled,
}) => {
const [on, setOn] = useState(false)
const onToggle = useCallback(v => {
if (disabled) return
if (v) setOn(true)
animate({ node, on: v }).finally(() => {
if (!v) setOn(false)
})
}, [animate, node, disabled, effect])
return [on, onToggle]
}
export default useAnimate
The usage is the following,
const ref = useRef()
const [on, onToggle] = useAnimate({
animate: animateFunc,
node: ref.current,
disabled
})
const onClick = () => { onToggle(!on) }
return (
<div ref={ref}>
{on && <YOUROWNCOMPONENT onClick={onClick} /> }
</div>
)
and the animate implementation could be,
import anime from 'animejs'
const animateFunc = (params) => {
const { node, on } = params
const height = on ? 233 : 0
return new Promise(resolve => {
anime({
targets: node,
height,
complete: () => { resolve() }
}).play()
})
}
You can use React SyntheticEvent for that.
With events like onAnimationEnd or onTransitionEnd you can accomplish that.
React Docs: https://reactjs.org/docs/events.html#animation-events
Code Example: https://dev.to/michalczaplinski/super-easy-react-mount-unmount-animations-with-hooks-4foj
You could always use React lifecycle methods but react-transition-group is by far the most convenient library for animations I have come across, Whether you are using styled-components or plain css. It is especially useful when you want to track the mounting and unmounting of your component and render animations accordingly.
Use Transition with styled-components and CSSTransition when you are using plain css classnames.
If you are looking for simple hooks example:
import React, { useEffect, useReducer } from "react";
import ReactDOM from "react-dom";
const ANIMATION_TIME = 2 * 1000;
function Component() {
const [isMounted, toggleMounted] = useReducer((p) => !p, true);
const [isAnimateAnmount, toggleAnimateUnmount] = useReducer((p) => !p, false);
const [isVisible, toggleVisible] = useReducer((p) => (p ? 0 : 1), 0);
useEffect(() => {
if (isAnimateAnmount) {
toggleVisible();
toggleAnimateUnmount();
setTimeout(() => {
toggleMounted();
}, ANIMATION_TIME);
}
}, [isAnimateAnmount]);
useEffect(() => {
toggleVisible();
}, [isMounted]);
return (
<>
<button onClick={toggleAnimateUnmount}>toggle</button>
<div>{isMounted ? "Mounted" : "Unmounted"}</div>
{isMounted && (
<div
style={{
fontSize: 60,
opacity: isVisible,
transition: "all 2s ease"
}}
>
Example
</div>
)}
</>
);
}
I created a general purpose WrapperComponent called MountAnimation so that you can animate elements in and out without always having to write the same thing over and over. It uses CSSTransitions under the hood so you need to install that.
Install dependecies
npm install react-transition-group
Create component in one of your folders
import { CSSTransition } from "react-transition-group"
export const MountAnimation = ({
children,
timeout = 300, // MATCH YOUR DEFAULT ANIMATION DURATION
isVisible = false,
unmountOnExit = true,
classNames = "transition-translate-y", // ADD YOUR DEFAULT ANIMATION
...restProps
}) => {
return (
<CSSTransition
in={isVisible}
timeout={timeout}
classNames={classNames}
unmountOnExit={unmountOnExit}
{...restProps}
>
<div>{children}</div>
</CSSTransition>
)
}
Simply use it like this:
import { MountAnimation } from '../../path/to/component'
...
const [isElementVisible, setIsElementVisible] = useState(false)
return (
<MountAnimation isVisible={isElementVisible}>
// your content here
</MountAnimation>
)
(Go creative here) You need to declare your animation in your CSS file. Make sure you declare this in a globally available CSS file if you are code-splitting. In this example I am using the following animation:
.transition-translate-y-enter {
opacity: 0;
transform: translateY(-5px);
}
.transition-translate-y-enter-active {
opacity: 1;
transform: translateY(0px);
transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}
.transition-translate-y-exit {
opacity: 1;
transform: translateY(0px);
}
.transition-translate-y-exit-active {
opacity: 0;
transform: translateY(-5px);
transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}
Here is a live example of this implementation:
https://codesandbox.io/s/vibrant-elion-ngfzr?file=/src/App.js
rewrote of https://stackoverflow.com/a/54114180/8552163
please if you click like on this comment, like the parent too, thank you
clear js
import {useState, useEffect} from 'react';
const useDelayUnmount = (isMounted, msDelay = 500)=>{
const [shouldRender, setShouldRender] = useState(false);
useEffect(()=>{
let timeoutId;
if(isMounted && !shouldRender){
setShouldRender(true);
}else if(!isMounted && shouldRender){
timeoutId = setTimeout(()=>setShouldRender(false), msDelay);
}
return ()=>clearTimeout(timeoutId);
}, [isMounted, msDelay, shouldRender]);
return shouldRender;
};
export default useDelayUnmount;
The below code is somewhat similar to other answers but I wanted to attempt to scale the solution
to easily add different type of transitions e.g. fade, slide etc.
to use the same solution irrespective of conditionally rendering or just rendering without any condition.
In the below code, only these two code items are required to implement
AnimatableComponent - React component which internally uses TransitionComponent.
Note: One can also use TransitionComponent separately too to have transitions on a component which are not rendered conditionally.
And a set of CSS classes.
Rest is how to use them.
/**
* This is a simple component which applies your provided trasition on the component.
* Depending upon whether you want to show or hide the component, it adds In and Out classes on the component.
* For example, if your transition name is slide then it will add slideIn and slideOut classes to the component.
* At the end, it also provides onTransitionEnd event property to know when the transition ends.
*/
const TransitionComponent = ({show, transition, onTransitionEnd, children}) => {
const [transitionDirection, setTransitionDirection] = React.useState('out')
React.useEffect(() => {
const direction = show ? `${transition}In` : `${transition}Out`
setTransitionDirection(direction)
console.log(`${transition} ${direction}`)
}, [show])
return (
<div className={`${transition} ${transitionDirection}`} onTransitionEnd={onTransitionEnd}>
{children}
</div>
)
}
/**
* This can act as base/wrapper component for any custom component to animate
* React Components does not provide you a place to execute some code before a component is unmounted.
* For example, let's say a custom component is conditionally rendered based on a property/expression in the parent component (called as condition) and
* as soon as that condition evaluates to false then component is removed from the DOM.
* What to do when you want to show animations before it is removed? This component handles exactly that.
* This component handles conditional rendering within itself behind mount property and expects you to provide your condition in a show property
* show property is then mapped to the internal mount state at some desired levels like
* - When show is true, set mount to true. Thereby, adding the component in the DOM and running the animation.
* - When show is false, check if transition finishes and set mount to false. Thereby, removing the component from the DOM.
* conditionallyRender property? This component comes with another property so that you can enjoy the animations even if you do not want to conditionally render the component
* - When conditionallyRender is false, mount property is no more in effect and component rendered unconditionally i.e. is not conditionally rendered
* - When conditionallyRender is true (also default), mount property is in effect to conditionally render the component
*/
const AnimatableComponent = ({conditionallyRender = true, show, transition = 'fade', children}) => {
const [mount, setMount] = React.useState(show);
React.useEffect(() => {
if (conditionallyRender && show) {
setMount(true)
console.log('Mounted')
}
}, [show])
const handleTransitionEnd = () => {
if (conditionallyRender && !show) {
setMount(false)
console.log('Unmounted')
}
}
const getAnimatableChildren = () => {
return (
<TransitionComponent show={show} transition={transition} onTransitionEnd={handleTransitionEnd}>
{children}
</TransitionComponent>
)
}
return (
conditionallyRender
? ((show || mount) && getAnimatableChildren())
: getAnimatableChildren()
)
}
const BoxComponent = () => {
return (
<div className='box'>Box</div>
)
}
const App = () => {
const [mountedShow, setMountedShow] = React.useState(false)
const [displayShow, setDisplayShow] = React.useState(false)
const handleMountUnmountClick = () => {
setMountedShow(!mountedShow)
}
const handleShowHideClick = () => {
setDisplayShow(!displayShow)
}
return (
<React.Fragment>
<div style={{display: 'flex'}}>
<div style={{flex: 1}}>
<h1>Mount/Unmount Transitions</h1>
<AnimatableComponent conditionallyRender={true} show={mountedShow} transition='slide'>
<BoxComponent/>
</AnimatableComponent>
<button type="button" onClick={handleMountUnmountClick}>Mount/Unmount Box</button>
</div>
<div style={{flex: 1}}>
<h1>Display Transitions</h1>
<AnimatableComponent conditionallyRender={false} show={displayShow} transition='slide'>
<BoxComponent/>
</AnimatableComponent>
<button type="button" onClick={handleShowHideClick}>Show/Hide Box</button>
</div>
</div>
</React.Fragment>
)
}
ReactDOM.render(<App/>, document.getElementById('app-container'))
.box {
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: #f00;
margin: 24px;
}
.fade {
visibility: hidden;
opacity: 0;
transition: opacity 550ms, visibility 350ms;
}
.fade.fadeIn {
visibility: visible;
opacity: 1;
}
.fade.fadeOut {
visibility: hidden;
opacity: 0;
}
.slide {
visibility: hidden;
opacity: 0;
transform: translateX(100vw);
transition: transform 350ms, opacity 350ms, visibility 350ms;
}
.slide.slideIn {
visibility: visible;
opacity: 1;
transform: translateX(0);
}
.slide.slideOut {
visibility: hidden;
opacity: 0;
transform: translateX(100vw);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<div id="app-container">This is where React app will initialize</div>
Notes:
Here is a link to a good post that was referred to write this code.
Also referred this Code Sandbox for the condition of conditional rendering where both show and mount variables were used as in ((show || mount) && <Your Component.../>
Earlier I used only mount as in mount && <Your Component.../>. I do not understand the reason but it seems it has something to do with the DOM reflow and how CSS Transitions needs a reflow to properly work when they are applied on a conditionally rendered element e.g. an element added using appendChild or display: none in JS or && in React JSX.
Here is another codesandbox from one of the answer, which uses only one condition but this one used CSS Animations. CSS Animation doesn't seem to have this issue but CSS transitions do.
In Conclusion, it seems that if you use
CSS Transitions, then use logical OR of both the variables as in (show || mount) && <Your Component... />.
CSS Animations, then just the mount as in mount && <Your Component... />.
I found the simplest solution that works for me.
You can make animation using only css.
If we use animations, they are usually looped. But you can add a property that will allow the animation to fire only 1 time.
And when mounting the component, it turns out that we will start the animation, which will work 1 time.
(I use tailwind but the principle is the same)
How it looks in component (like simple class):
...
return (
<>
<div
id="scrim"
onClick={handleClose}
className="fixed inset-0 block flex h-full w-full items-end justify-center overflow-y-hidden bg-gray-800/50"
>
<div className="mt-[56px] flex animate-sheet 👈 flex-col items-center justify-center">
<div className=" z-10 flex w-full min-w-[220px] max-w-[640px] flex-col overflow-y-auto rounded-t-[16px] bg-blue-50 px-[12px] pb-[28px] scrollbar-hide dark:bg-gray-900">
...
Now change configuration of your tailwind file and add additional animation
...
animation: {
sheet: "sheet 0.5s cubic-bezier(.9,0,.2,1) 1", 👈 here you can change "1" to "infinity" and get looped animation or vice versa
},...
And specify keyframes:
...
keyframes: {
sheet: {
from: {
transform: "translateY(100%)",
},
to: {
transform: "translateY(0)",
},
},
...
The disadvantage of this method is that there is no effect when the component is unmounted. But in my case, I think that in terms of the amount of code, its simplicity and the effect achieved, this is an excellent compromise than dragging new dependencies or adding custom hooks.
I have a problem, which I have no ideas, how to solve.
In my react component I display a long list of data and few links at the bottom.
After clicking on any of this links I fill in the list with new collection of the links and need to scroll to the top.
The problem is - how to scroll to the top after new collection is rendered?
'use strict';
// url of this component is #/:checklistId/:sectionId
var React = require('react'),
Router = require('react-router'),
sectionStore = require('./../stores/checklist-section-store');
function updateStateFromProps() {
var self = this;
sectionStore.getChecklistSectionContent({
checklistId: this.getParams().checklistId,
sectionId: this.getParams().sectionId
}).then(function (section) {
self.setState({
section,
componentReady: true
});
});
this.setState({componentReady: false});
}
var Checklist = React.createClass({
mixins: [Router.State],
componentWillMount: function () {
updateStateFromProps.call(this);
},
componentWillReceiveProps(){
updateStateFromProps.call(this);
},
render: function () {
if (this.state.componentReady) {
return(
<section className='checklist-section'>
<header className='section-header'>{ this.state.section.name } </header>
<Steps steps={ this.state.section.steps }/>
<a href=`#/${this.getParams().checklistId}/${this.state.section.nextSection.Id}`>
Next Section
</a>
</section>
);
} else {...}
}
});
module.exports = Checklist;
Finally.. I used:
componentDidMount() {
window.scrollTo(0, 0)
}
EDIT: React v16.8+
useEffect(() => {
window.scrollTo(0, 0)
}, [])
Since the original solution was provided for very early version of react, here is an update:
constructor(props) {
super(props)
this.myRef = React.createRef() // Create a ref object
}
componentDidMount() {
this.myRef.current.scrollTo(0, 0);
}
render() {
return <div ref={this.myRef}></div>
} // attach the ref property to a dom element
You could use something like this. ReactDom is for react.14. Just React otherwise.
componentDidUpdate = () => { ReactDom.findDOMNode(this).scrollIntoView(); }
Update 5/11/2019 for React 16+
constructor(props) {
super(props)
this.childDiv = React.createRef()
}
componentDidMount = () => this.handleScroll()
componentDidUpdate = () => this.handleScroll()
handleScroll = () => {
const { index, selected } = this.props
if (index === selected) {
setTimeout(() => {
this.childDiv.current.scrollIntoView({ behavior: 'smooth' })
}, 500)
}
}
In React Routing there is the problem that if we redirect to the new route, then it won't automatically take you to the top of the page.
Even I did have the same issue.
I just added the single line to my component and it worked like butter.
componentDidMount() {
window.scrollTo(0, 0);
}
Refer: react training
Hook solution:
Create a ScrollToTop hook
import { useEffect } from "react";
import { withRouter } from "react-router-dom";
const ScrollToTop = ({ children, location: { pathname } }) => {
useEffect(() => {
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth"
});
}, [pathname]);
return children || null;
};
export default withRouter(ScrollToTop);
Wrap your App with it
<Router>
<ScrollToTop>
<App />
</ScrollToTop>
</Router>
Documentation : https://reacttraining.com/react-router/web/guides/scroll-restoration
For those using hooks, the following code will work.
React.useEffect(() => {
window.scrollTo(0, 0);
}, []);
Note, you can also import useEffect directly: import { useEffect } from 'react'
This could, and probably should, be handled using refs:
"... you can use ReactDOM.findDOMNode as an "escape hatch" but we don't recommend it since it breaks encapsulation and in almost every case there's a clearer way to structure your code within the React model."
Example code:
class MyComponent extends React.Component {
componentDidMount() {
this._div.scrollTop = 0
}
render() {
return <div ref={(ref) => this._div = ref} />
}
}
You can do this in the router like that:
ReactDOM.render((
<Router onUpdate={() => window.scrollTo(0, 0)} history={browserHistory}>
<Route path='/' component={App}>
<IndexRoute component={Home}></IndexRoute>
<Route path="/about" component={About}/>
<Route path="/work">
<IndexRoute component={Work}></IndexRoute>
<Route path=":id" component={ProjectFull}></Route>
</Route>
<Route path="/blog" component={Blog}/>
</Route>
</Router>
), document.getElementById('root'));
The onUpdate={() => window.scrollTo(0, 0)} put the scroll top.
For more information check: codepen link
This works for me.
import React, { useEffect } from 'react';
useEffect(() => {
const body = document.querySelector('#root');
body.scrollIntoView({
behavior: 'smooth'
}, 500)
}, []);
Here's yet another approach that allows you to choose which mounted components you want the window scroll position to reset to without mass duplicating the ComponentDidUpdate/ComponentDidMount.
The example below is wrapping the Blog component with ScrollIntoView(), so that if the route changes when the Blog component is mounted, then the HOC's ComponentDidUpdate will update the window scroll position.
You can just as easily wrap it over the entire app, so that on any route change, it'll trigger a window reset.
ScrollIntoView.js
import React, { Component } from 'react';
import { withRouter } from 'react-router';
export default WrappedComponent => {
class ResetWindowScroll extends Component {
componentDidUpdate = (prevProps) => {
if(this.props.location !== prevProps.location) window.scrollTo(0,0);
}
render = () => <WrappedComponent {...this.props} />
}
return withRouter(ResetWindowScroll);
}
Routes.js
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from '../components/App';
import About from '../components/pages/About';
import Blog from '../components/pages/Blog'
import Index from '../components/Landing';
import NotFound from '../components/navigation/NotFound';
import ScrollIntoView from '../components/navigation/ScrollIntoView';
export default (
<Route path="/" component={App}>
<IndexRoute component={Index} />
<Route path="/about" component={About} />
<Route path="/blog" component={ScrollIntoView(Blog)} />
<Route path="*" component={NotFound} />
</Route>
);
The above example works great, but if you've migrated to react-router-dom, then you can simplify the above by creating a HOC that wraps the component.
Once again, you could also just as easily wrap it over your routes (just change componentDidMount method to the componentDidUpdate method example code written above, as well as wrapping ScrollIntoView with withRouter).
containers/ScrollIntoView.js
import { PureComponent, Fragment } from "react";
class ScrollIntoView extends PureComponent {
componentDidMount = () => window.scrollTo(0, 0);
render = () => this.props.children
}
export default ScrollIntoView;
components/Home.js
import React from "react";
import ScrollIntoView from "../containers/ScrollIntoView";
export default () => (
<ScrollIntoView>
<div className="container">
<p>
Sample Text
</p>
</div>
</ScrollIntoView>
);
This solution is working for the Functional component as well as the Class Base.
First of all, I do not like the idea of Scroll to top on every re-render, instead, I like of attache function to the particular event.
Step #1: Create a function to ScrollToTop
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
};
Step #2: Call this function on an event e.g onClick
onRowClick={scrollToTop()}
// onClick={scrollToTop()}
// etc...
I'm using react-router ScrollToTop Component which code described in react-router docs
https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top
I'm changing code in single Routes file and after that no need of change code in every component.
Example Code -
Step 1 - create ScrollToTop.js Component
import React, { Component } from 'react';
import { withRouter } from 'react-router';
class ScrollToTop extends Component {
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
window.scrollTo(0, 0)
}
}
render() {
return this.props.children
}
}
export default withRouter(ScrollToTop)
Step 2 - In App.js file, add ScrollToTop Component after <Router
const App = () => (
<Router>
<ScrollToTop>
<App/>
</ScrollToTop>
</Router>
)
If all want to do is something simple here is a solution that will work for everybody
add this mini function
scrollTop()
{
window.scrollTo({
top: 0,
behavior: "smooth"
});
}
call the function as following from the footer of the page
<a className="scroll-to-top rounded" style={{display: "inline"}} onClick={this.scrollTop}>TOP</a>
if you want to add nice styles here is the css
.scroll-to-top {
position: fixed;
right: 1rem;
bottom: 1rem;
display: none;
width: 2.75rem;
height: 2.75rem;
text-align: center;
color: #fff;
background: rgba(90, 92, 105, 0.5);
line-height: 46px;
}
This is the only thing that worked for me (with an ES6 class component):
componentDidMount() {
ReactDOM.findDOMNode(this).scrollIntoView();
}
All of the above didn't work for me - not sure why but:
componentDidMount(){
document.getElementById('HEADER').scrollIntoView();
}
worked, where HEADER is the id of my header element
I have tried #sledgeweight solution but it does not work well for some of the views. But adding a setTimeout seems to work perfectly. In case someone facing the same issue as me. Below is my code.
import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'
const ScrollToTop = () => {
const { pathname } = useLocation()
useEffect(() => {
console.log(pathname)
/* settimeout make sure this run after components have rendered. This will help fixing bug for some views where scroll to top not working perfectly */
setTimeout(() => {
window.scrollTo({ top: 0, behavior: 'smooth' })
}, 0)
}, [pathname])
return null
}
export default ScrollToTop
Use it in AppRouter.js as
<Router>
<ScrollToTop/>
<App>
</Router>
Using Hooks in functional components,
assuming the component updates when theres an update in the result props
import React, { useEffect } from 'react';
export const scrollTop = ({result}) => {
useEffect(() => {
window.scrollTo(0, 0);
}, [result])
}
The page that appears after clicking, just write into it.
componentDidMount() {
window.scrollTo(0, 0);
}
Smooth scroll to top . In hooks you can use this method inside lifecycle mounting state for once render
useEffect(() => {
window.scrollTo({top: 0, left: 0, behavior: 'smooth' });
}, [])
Looks like all the useEffect examples dont factor in you might want to trigger this with a state change.
const [aStateVariable, setAStateVariable] = useState(false);
const handleClick = () => {
setAStateVariable(true);
}
useEffect(() => {
if(aStateVariable === true) {
window.scrollTo(0, 0)
}
}, [aStateVariable])
I tried everything, but this is the only thing that worked.
useLayoutEffect(() => {
document.getElementById("someID").scrollTo(0, 0);
});
This is what I did:
useEffect(() => ref.current.scrollTo(0, 0));
const ref = useRef()
return(
<div ref={ref}>
...
</div>
)
I was doing a SPA in React 17.0 using functional components and window.scroll, window.scrollTo and all of this variants doesn't work for me. So I made a solution using useRef hook. I created a span tag in the top of the component with Ref and then I used and effect with ref.current.scrollIntoView()
There is a short example:
import React, { useEffect,useRef} from 'react';
export const ExampleComponent = () => {
const ref = useRef();
useEffect(() => {
ref.current.scrollIntoView()
}, []);
return(
<>
<span ref={ref}></span>
<YourCodeHere />
<MoreCode />
</>
)
}
For React v18+ my recommendation will be to use wrapper component, will be the easiest way to execute.
Step 1: Create a ScrollToTop component (component/ScrollToTop.js)
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
export function ScrollToTop() {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return null;
}
Step 2: Wrap your App with it (index.js)
<React.StrictMode>
<BrowserRouter>
<ScrollToTop />
<App />
</BrowserRouter>
</React.StrictMode>
Explanation: Every time pathname changes useEffect will be called to scroll the page to the top.
I'm using React Hooks and wanted something re-usable but also something I could call at any time (rather than just after render).
// utils.js
export const useScrollToTop = (initialScrollState = false) => {
const [scrollToTop, setScrollToTop] = useState(initialScrollState);
useEffect(() => {
if (scrollToTop) {
setScrollToTop(false);
try {
window.scroll({
top: 0,
left: 0,
behavior: 'smooth',
});
} catch (error) {
window.scrollTo(0, 0);
}
}
}, [scrollToTop, setScrollToTop]);
return setScrollToTop;
};
Then to use the hook you can do:
import { useScrollToTop } from 'utils';
const MyPage = (props) => {
// initialise useScrollToTop with true in order to scroll on page load
const setScrollToTop = useScrollToTop(true);
...
return <div onClick={() => setScrollToTop(true)}>click me to scroll to top</div>
}
I ran into this issue building a site with Gatsby whose Link is built on top of Reach Router. It seems odd that this is a modification that has to be made rather than the default behaviour.
Anyway, I tried many of the solutions above and the only one that actually worked for me was:
document.getElementById("WhateverIdYouWantToScrollTo").scrollIntoView()
I put this in a useEffect but you could just as easily put it in componentDidMount or trigger it any other way you wanted to.
Not sure why window.scrollTo(0, 0) wouldn't work for me (and others).
I had the same for problem for a while. Adding window.scrollTo(0, 0);to every page is painful and redundant. So i added a HOC which will wrap all my routes and it will stay inside BrowserRouter component:
<ScrollTop>
<Routes />
</ScrollTop>
Inside ScrollTopComponent we have the following:
import React, { useEffect } from "react";
import { useLocation } from "react-router-dom";
const ScrollTop = (props) => {
const { children } = props;
const location = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [location]);
return <main>{children}</main>;
};
export default ScrollTop;
Solution for functional component - Using useEffect() hook
useEffect(() => {
window.history.scrollRestoration = 'manual';}, []);
If you are doing this for mobile, at least with chrome, you will see a white bar at the bottom.
This happens when the URL bar disappears. Solution:
Change the css for height/min-height: 100% to height/min-height: 100vh.
Google Developer Docs
None of the above answers is currently working for me. It turns out that .scrollTo is not as widely compatible as .scrollIntoView.
In our App.js, in componentWillMount() we added
this.props.history.listen((location, action) => {
setTimeout(() => { document.getElementById('root').scrollIntoView({ behavior: "smooth" }) }, 777)
})
This is the only solution that is working universally for us. root is the ID of our App. The "smooth" behavior doesn't work on every browser / device. The 777 timeout is a bit conservative, but we load a lot of data on every page, so through testing this was necessary. A shorter 237 might work for most applications.