[react] add support for forwardRef

🔎 Usage Questions

I am using the react warpper for simplebar and everything seems to work great but I am trying to get how much the user has scrolled and I tried the following:

export const ScrollableContent = ({ children }) => {
  const simplebar = useRef(null);

  useEffect(() => {
    if (simplebar.current) {
      simplebar.current
        .getScrollElement()
        .addEventListener('scroll', e => console.log(e));
    }
  }, [simplebar]);

  return (
    <>
      <ScrollBarCSS />
      <ScrollWrapper>
        <Content>
          <SimpleBar
            ref={simplebar}
          >
            {children}
          </SimpleBar>
        </Content>
      </ScrollWrapper>
    </>
  );
};

But it doesn’t seem to work and I don’t ever get a current in my ref

Does anyone have any ideas?

[Grsmto]

Hey Sara,

Yeah actually we don’t use forwardRef so it prob doesn’t work as you would expect (actually you’re absolutely right in your code and that should definitely return the SimpleBar instance!). You can probably solve your issue using the scrollableNodeProps prop:

<SimpleBar
    scrollableNodeProps={{ ref: scrollableElRef }}
>
...

What you would get here is a ref to the DOM element directly (what getScrollElement() returns), so you won’t have to do getScrollElement. You can directly attach the listener to it in theory.

I realise that the React plugin (and actually Vue and Angular ones as well) don’t have any documentation yet. I’ll put the forwardRef and documentation as high priority.

Thanks for your report, hope this helps!

[Grsmto]

Hey @SaraVieira I ended up implementing this directly, thanks again for your help.