Adapt to children's changes in dimension

The Scrollbars component doesn’t react to changes in the height (and I assume width) of its children until the user starts scrolling. This is a problem for content that can have its dimensions change dynamically. For instance, I have a file tree that the user can expand many levels down and as it gets expanded, it eventually overflows the container. At the moment, the scrollthumb doesn’t appear until the user starts scrolling using the mousewheel. What is worse is that once the user starts closing the file tree, as it shrinks, the scrollthumb doesn’t disappear even though the content is no longer scrollable.

I have managed to find a solution for my own usecase by using react-measure to watch the changes in the dimensions of the children and then triggering a state change to rerender the scrollbars component.

However, it would be best if the scrollbars component handled this internally as it would match the behavior of the browsers’ scrollbars.

P.S. for the sake of others who may have the same issue, here’s what I did with react-measure to solve the problem:

<Scrollbars
	{...this.props}
>
	<Measure
		onMeasure={dimensions => this.setState({dimensions})}
	>
		<div>
			{this.props.children}
		</div>
	</Measure>
</Scrollbars>

[hosseinnedaee]

I have created a component like this and it works:

import React, { useRef } from 'react';
import Measure from 'react-measure';
import { Scrollbars } from 'react-custom-scrollbars';

const Scrollbar: React.FC = ({ children }) => {
  const ScrollbarsRef = useRef<any>(null);
  return (
    <Scrollbars
      ref={ScrollbarsRef}
    >
      <Measure
        bounds
        onResize={() => {
          ScrollbarsRef.current && ScrollbarsRef.current.forceUpdate();
        }}
      >
        {({ measureRef }) => <div ref={measureRef}>{children}</div>}
      </Measure>
    </Scrollbars>
  );
};

export default Scrollbar;

[iglizer]

Easiest option for now is to force an update on the scrollbar element inside the callback of the resizing event: this.scrollbarElement.forceUpdate(); (given that scrollbarElement is a ref to Scrollbars )