Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support react-window library #148

Closed
Media-Evil opened this issue Oct 10, 2019 · 18 comments
Closed

Support react-window library #148

Media-Evil opened this issue Oct 10, 2019 · 18 comments
Labels
🍌 question react Issue has a connection to the React framework. 💦 Virtualization Issue has a connection with a scroll virtualization library.

Comments

@Media-Evil
Copy link

this does not work

import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
import  { FixedSizeList } from 'react-window'

//oversimplified!
<OverlayScrollbarsComponent>
  <FixedSizeList>
    //content
  </FixedSizeList>
</OverlayScrollbarsComponent>
@KingSora
Copy link
Owner

KingSora commented Oct 10, 2019

Good day!

I'm aware of a bug which prevents the usage of structural directives like v-for in Vue. I've also tested this with React and could confirm the same bug here. It's possible this bug is also prevent your solution from working.
Luckily I've already fixed this bug and made some general improvements to the component wrappers.

This update (v1.10.0) should come very soon (maybe today in fact). In the meantime you could try to create a simple example on StackBlitz or CodeSandbox in case the new release won't fix your problem.

@KingSora
Copy link
Owner

@Media-Evil The new version is now here. Please test it!

@Media-Evil
Copy link
Author

Media-Evil commented Oct 11, 2019

Tested with lists. Native scrollbars still persist if component is passed as a child to <OverlayScrollbarsComponent>. There are no problems with html tagnames though.

Do component wrappers now support textareas?

@KingSora
Copy link
Owner

@Media-Evil no they arent yet!

Could you create a example on one of the pages mentioned above, so I could take a look and identify the issue, else I cant really help you out.

@Media-Evil
Copy link
Author

@KingSora
Copy link
Owner

Thanks!

Thats no bug, since react-window is a library which already provides its own viewport and therefore scrollcontainer. But theres a possibility to support it, but I'm not quite sure how to implement it yet.

@KingSora KingSora added 🍐 improvement react Issue has a connection to the React framework. labels Oct 12, 2019
@KingSora KingSora changed the title do frameworks component wrappers support component children? Support react-window library Oct 12, 2019
@joa-queen
Copy link

I managed to make it work with react-window. You can set an outerElementType and pass the scroll event to the corresponding element. This is how:

const Overflow = ({ children, onScroll }) => {
  const ofRef = useRef(null);

  useEffect(() => {
    const el = ofRef.current.osInstance().getElements().viewport;

    if (onScroll) el.addEventListener('scroll', onScroll);

    return () => {
      if (onScroll) el.removeEventListener('scroll', onScroll);
    };
  }, [onScroll]);

  return (
    <OverlayScrollbarsComponent
      options={options}
      ref={ofRef}
    >
      {children}
    </OverlayScrollbarsComponent>
  );
};

And then, in your virtualized component:

<FixedSizeGrid
  {...props}
   outerElementType={Overflow}
>

I'm using this with FixedSizeGrid but it should work the same for lists.

Hope it helps.

@ndanzi
Copy link

ndanzi commented Jan 26, 2021

Is there the possibility to make it work also with react-virtualized?
here is a sandbox with a non working example: https://codesandbox.io/s/peaceful-swirles-c61w0?file=/src/App.js

@partha-0103
Copy link

I managed to make it work with react-window. You can set an outerElementType and pass the scroll event to the corresponding element. This is how:

const Overflow = ({ children, onScroll }) => {
  const ofRef = useRef(null);

  useEffect(() => {
    const el = ofRef.current.osInstance().getElements().viewport;

    if (onScroll) el.addEventListener('scroll', onScroll);

    return () => {
      if (onScroll) el.removeEventListener('scroll', onScroll);
    };
  }, [onScroll]);

  return (
    <OverlayScrollbarsComponent
      options={options}
      ref={ofRef}
    >
      {children}
    </OverlayScrollbarsComponent>
  );
};

And then, in your virtualized component:

<FixedSizeGrid
  {...props}
   outerElementType={Overflow}
>

I'm using this with FixedSizeGrid but it should work the same for lists.

Hope it helps.

is this working?

@partha-0103
Copy link

@joa-queen please check this sandbox

@nfmshow
Copy link

nfmshow commented Jun 3, 2022

@partha-0103 wrap the scrollbar children with a div with fixed height.

<OverlayScrollbarsComponent options={options} ref={ofRef}>
   <div style={{ maxHeight: "100px" }}>
      {children}
   </div>
</OverlayScrollbarsComponent>

@KingSora
Copy link
Owner

KingSora commented Mar 8, 2023

It took a bit of time, but with v2 OverlayScrollbars should work with all virtual scroll libraries. I've created a small example for FixedSizeList here: https://stackblitz.com/edit/react-8glpkm?file=index.js and also an example with horizontal layout: https://stackblitz.com/edit/react-wdbggw?file=index.js

You can use this approach also for VariableSizeList, FixedSizeGrid and FixedSizeGrid.

@comerc
Copy link

comerc commented Apr 25, 2023

@KingSora please add example for VariableSizeList.outerElementType with useOverlayScrollbars. It is working code without useOverlayScrollbars:

const outerElementType = React.forwardRef(({ children, onScroll, style }, ref) => {
  return <div {...{ ref, style, onScroll }}>{children}</div>
})

other example: https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-wqmeo?file=/index.js:323-339

@KingSora KingSora added the 💦 Virtualization Issue has a connection with a scroll virtualization library. label Oct 19, 2023
@codingedgar
Copy link

It took a bit of time, but with v2 OverlayScrollbars should work with all virtual scroll libraries. I've created a small example for FixedSizeList here: https://stackblitz.com/edit/react-8glpkm?file=index.js and also an example with horizontal layout: https://stackblitz.com/edit/react-wdbggw?file=index.js

You can use this approach also for VariableSizeList, FixedSizeGrid and FixedSizeGrid.

Hello, thank you for the library, and sorry for the silly question but, how could I remove the flicker at the start? tried to add data-overlay scrollbars-initialize in https://stackblitz.com/edit/react-8glpkm?file=index.js but there are still a few frames where the initial scrollbar is visible

@Rychu-Pawel
Copy link

Rychu-Pawel commented Mar 11, 2024

It took a bit of time, but with v2 OverlayScrollbars should work with all virtual scroll libraries. I've created a small example for FixedSizeList here: https://stackblitz.com/edit/react-8glpkm?file=index.js and also an example with horizontal layout: https://stackblitz.com/edit/react-wdbggw?file=index.js

You can use this approach also for VariableSizeList, FixedSizeGrid and FixedSizeGrid.

@KingSora
v2.4.7 is the last one that works correctly with this example. From v2.5.0 it breaks. Could you please update your example for the newest version?

@KingSora
Copy link
Owner

@Rychu-Pawel I'm looking into it!

@KingSora
Copy link
Owner

@Rychu-Pawel Alright, sorry for the trouble... The problem was that remaining IE11 compatibility code was overwriting the height style set by the react-window library. I've now properly removed the remaining code and published a new version v2.6.1 which should work again without problems: https://stackblitz.com/edit/react-2heqyv?file=index.js

@Rychu-Pawel
Copy link

@KingSora, wow, that was blazing fast 💪 I can confirm the newest version is working as expected. Thank you so much for your quick fix! Best package maintenance ever 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🍌 question react Issue has a connection to the React framework. 💦 Virtualization Issue has a connection with a scroll virtualization library.
Projects
None yet
Development

No branches or pull requests

9 participants