Simplebar: Add support for usage within react-window

[Grsmto]

I don't know if the issue should be posted here or there but let's discuss.
At the moment it's impossible to use SimpleBar in react-window because both plugin create their own element to listen to the scroll.
I don't know how we could achieve this but it would work nicely together if there was a way to specify the scrollable node (either SimpleBar passing the scrollable node to react-window or the opposite).
In theory SimpleBar is positioned higher in the DOM than react-window, so I would guess that it's to react-window to accept a scrollableNode prop.

I see an API like this:

<SimpleBar>
  {({ scrollableNode }) => (
    <FixedSizeList scrollableNode={scrollableNode}>
      {({ index, style }) => {
        ...
      }}
    </FixedSizeList>
  )}
</SimpleBar>

cc @bvaughn

[bvaughn]

I don't know what "scrollableNode" is. I assume it's just a ref that gets attached to the outer <div> rendered by react-window? If so, then use the outerRef prop mentioned in the docs:

outerRef: function | createRef object
Ref to attach to the outer container element. This is an advanced property.

If it's _actually_ a DOM element managed by SimpleBar, then I don't think I have much interest in adding support for that.

[Grsmto]

Released an alpha version with support for other libraries like the React-select v2+, React-window, etc.
[email protected]

[sergej-s]

@Grsmto, don't you have an example of how to use simplebar with react-window? I really cannot find a way...

[barbalex]

I managed to make it work. Example here.

[dustinlakin]

@barbalex what versions of each library are you using? Using that same setup you have there, It was giving me an error on Simplebar’s recalculate since one of the refs passed down wasn’t connecting and coming back as undefined. If you or anyone can create a working codesandbox with the two working together, it would be really helpful.

[barbalex]

@dustinlakin

"react-window": "1.8.5"
"simplebar-react": "2.3.0"

If you need to know more: https://github.com/FNSKtZH/ae2/blob/a41538380b39b77daea9bf795ad860caad60cbcd/package.json

[dustinlakin]

I created a simple example that doesn't seem to be working:
https://codesandbox.io/s/simplebar-react-window-zwdw8?file=/src/App.js

At one point in my testing, it was actually giving me an error on Simplebar recalculate method, and looks like the refs passed down weren't connecting correctly (or quickly enough).

I am also able to get it to work when I replaced something in the component and had it do the react hot reload.

Not sure if you @barbalex see anything wrong in that example or @Grsmto had any ideas about the possible ref issues.

[barbalex]

@dustinlakin

Two things were missing:

• the import for simplebar.min.css
• Styling to hide the native scrollbar

See: https://codesandbox.io/s/simplebar-react-window-forked-bp3hs?file=/src/App.js

[dustinlakin]

Amazing, thanks for checking it out @barbalex!