React 16.8 +, Functional component
const ScrollDemo = () => {
const myRef = useRef(null)
const executeScroll = () => myRef.current.scrollIntoView()
// run this function from an event handler or an effect to execute scroll
return (
<>
<div ref={myRef}>Element to scroll to</div>
<button onClick={executeScroll}> Click to scroll </button>
</>
)
}
Click here for a full demo on StackBlitz
React 16.3 +, Class component
class ReadyToScroll extends Component {
constructor(props) {
super(props)
this.myRef = React.createRef()
}
render() {
return <div ref={this.myRef}>Element to scroll to</div>
}
executeScroll = () => this.myRef.current.scrollIntoView()
// run this method to execute scrolling.
}
Class component - Ref callback
class ReadyToScroll extends Component {
render() {
return <div ref={ (ref) => this.myRef=ref }>Element to scroll to</div>
}
executeScroll = () => this.myRef.scrollIntoView()
// run this method to execute scrolling.
}
Don't use String refs.
String refs harm performance, aren't composable, and are on their way out (Aug 2018).
string refs have some issues, are considered legacy, and are likely to
be removed in one of the future releases. [Official React documentation]
resource1resource2
Optional: Smoothe scroll animation
/* css */
html {
scroll-behavior: smooth;
}
Passing ref to a child
We want the ref to be attached to a dom element, not to a react component. So when passing it to a child component we can't name the prop ref.
const MyComponent = () => {
const myRef = useRef(null)
return <ChildComp refProp={myRef}></ChildComp>
}
Then attach the ref prop to a dom element.
const ChildComp = (props) => {
return <div ref={props.refProp} />
}
