I basically want to animate scrollTop in React when a react property changes value. A "cut-down" Component I am using looks something like this:
import React, { Component } from 'react';
class ScrollComponent extends Component {
constructor(props) {
super(props);
this.scrollTo = this.props.scrollTo;
}
componentDidUpdate() {
//Animate "container" to scroll to this.props.scrollTo in 1000ms
}
render() {
return (
<div ref="container" style={{height:'300px', width:'100%', overflowY:'scroll',position:'relative'}}>
<div style={{height:'1000px'}}>
</div>
</div>
)
}
}
I guessing this can easily be done using jQuery, a bit trickier with native JavaScript. What is the correct way to do this with React?
I am aware of ReactCSSTransitionGroup and ReactTransitionGroup, if there is an easy way I can do it with these addons, that would be great, if there is another way, even better.
Thanks.