scroll-sync-react icon indicating copy to clipboard operation
scroll-sync-react copied to clipboard

Render props

Open Gibbo3771 opened this issue 3 years ago • 0 comments

This is related to #15 and is more of a proof of concept than anything else. Using a render slot may not be the best way to do this, but it's a good place to start. I would prefer to use a fowardRef and pass that directly to the scroll component like so:

const MyCustomComponent = React.forwardRef(( _props, ref ) => {
  return (
    <div id="outer">
        <div id="inner" ref={ref}></div>
    </div>
  )
})

<ScrollSyncNode component={MyCustomComponent} /> 

However, I am working on an example for the above, until then we have this.

Having the render prop allows the developer to decide which element we want to store a ref for, I have included an example so you can can clone or add my fork remote to your existing project and see what you think.

I am aware this breaks some existing functionality and the typings are poor, I didn't spend to much time on it.

Gibbo3771 avatar Sep 03 '21 14:09 Gibbo3771