simple bar react is not working properly with react window

React window and simple bar react both are very famous libraries/plugins. And sometimes we need both to be worked together.

I came across this issue of simplebar and react-window together is not working in my case so debugged it. and found the reason.

Simplebar react scroll event does not provide the currentTarget property in the event. And react-window depends on it.

 

import React from "react";
import ReactDOM from "react-dom";
import { FixedSizeList as List } from "react-window";
import SimpleBarReact from "simplebar-react";

import "simplebar/src/simplebar.css";

const CustomScrollBar = function ({ children, style, onScroll }) {
  function onScroll1(...rest) {
    rest[0].currentTarget = rest[0].target;
    onScroll(rest[0]);
  }

  return (
    <SimpleBarReact
      onScroll={onScroll1}
      style={{
        height: 300
      }}
    >
      {children}
    </SimpleBarReact>
  );
};

function App() {
  return (
    <div className="App">
      <h1>SimpleBar + React Window</h1>
      <div>
        <List
          height={300}
          itemCount={1000}
          itemSize={35}
          outerElementType={CustomScrollBar}
        >
          {({ index, style }) => <div style={style}>Row {index}</div>}
        </List>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here is the working example.