FixedSizeList + SimpleBarReact

FixedSizeListSimpleBar.tsx

import SimpleBarReact from 'simplebar-react';
import { FixedSizeList } from 'react-window';
import React from 'react';

const FixedSizeListSimpleBar: React.FC<typeof FixedSizeList & {
  className?: string;
  height?: number;
  children: React.ReactNode;
}> = ({
  className,
  height,
  children,
  ...props
}) => (
  <SimpleBarReact className={ className } style={ { height } }>
    {
      // @ts-ignore
      ({ scrollableNodeRef, contentNodeRef }) => {
        return (
          <FixedSizeList
            height={ height }
            outerRef={ scrollableNodeRef }
            innerRef={ contentNodeRef }
            className="simplebar-content-wrapper"
            { ...props }
          >
            { children }
          </FixedSizeList>
        );
      }
    }
  </SimpleBarReact>
);

export default FixedSizeListSimpleBar;