how to access ref and programatically scroll in react-beautiful-dnd

Question

What i want to achieve: programatically scroll in react-beautiful-dnd droppable column

if it was a simple react div, i could:

const myref = useRef(null)
const executeScroll = () => {
  myref.current.scrollLeft = 1500;
}

return(
  <div>
    <div 
      className={classes.root} 
      **ref={myref}**
    >
        {filteredData.map((spot) => 
          <SpotCard key={spot.place.id} spot={spot}/>
        )}
    </div>
  <button onClick={executeScroll}/>
  </div>
)

However, after I implemented react-beautiful-dnd, I needed to replace the ref

<Droppable 
  droppableId="1"
  direction="horizontal"
>
  {(provided) => (
    <div 
      className={classes.root} 
      **ref={provided.innerRef}**
      {...provided.droppableProps}>
        {filteredData.map((spot, index) => 
          <SpotCard key={spot.place.id} spot={spot} index={index}/>
        )}
        {provided.placeholder}
    </div>
  )}
</Droppable>

how do i access the ref now to execute the scroll programatically now?

Answer 1

just add another div with your ref

const myRef = useRef(null);

return (
  <Droppable droppableId="1">
    {(provided) => (
      <div ref={provided.innerRef} {...provided.droppableProps}>
        <div ref={myRef}>
          {filteredData.map((spot, index) => 
            <SpotCard key={spot.place.id} spot={spot} index={index} />
          )}
        </div>
        {provided.placeholder}
      </div>
    )}
  </Droppable>
);