I have developed the following code:
import React from 'react'
import { range } from 'lodash'
const DIV_NUMBER = 5
export default class App extends React.Component {
constructor(props) {
super(props)
this.divs = []
}
handleScroll = divIdx => () => {
const divRef = this.divs[divIdx]
const left = divRef.scrollLeft
const top = divRef.scrollTop
this.divs.forEach(div => (div.scrollLeft = left))
this.divs.forEach(div => (div.scrollTop = top))
}
render() {
return (
<div style={{ border: '1px solid tomato' }}>
{range(DIV_NUMBER).map(i => {
return (
<div
key={i}
ref={divElem => (this.divs[i] = divElem)}
onScroll={this.handleScroll(i)}
style={{
width: 300,
height: 100,
margin: '2px',
overflow: 'auto',
border: '1px solid black',
}}
>
<div
style={{
width: 500,
height: 400,
}}
>
Unique content...
</div>
</div>
)
})}
</div>
)
}
}
The code works as intended. It generates 5 resizable div elements, where scrolling one scrolls all of them simultaneously. This functionality is achieved using React references.
Now, I am looking to create a component that encapsulates this logic.
What I envision is something like:
<ScrollDivs>
{range(DIV_NUMBER).map(i => {
return (
<div
key={i}
style={{
width: 500,
height: 400,
}}
>
All the text goes here...
</div>
)
})}
</ScrollDivs>
Therefore, a ScrollDivs magic component that handles the underlying logic. Users of this component won't need to know the specifics, they just wrap the divs they want synchronized scrolling for within this component.
I'm unsure how to proceed with implementing this. Any guidance would be greatly appreciated.