useThrottle

View on GitHub

import { useThrottle } from '@sky-uk/ui-core';

The useThrottle hook can be used to return a value at regular intervals during the execution of a repeated action. Throttle is most suitably used for continuous user events such as resizing or scrolling.

Select background colour

() => {
  const Example = () => {
    const { dimensions } = useWindowResize();
    const throttledDimensions = useThrottle(dimensions);

    return (
      <div>
        Window throttledDimensions:
        {throttledDimensions.width} x {throttledDimensions.height}
      </div>
    );
  };

  return <Example />;
}

() => {
  const Example = () => {
    const { dimensions } = useWindowResize();
    const throttledDimensions = useThrottle(dimensions);

    return (
      <div>
        Window throttledDimensions:
        {throttledDimensions.width} x {throttledDimensions.height}
      </div>
    );
  };

  return <Example />;
}

Options

limit

The limit option can be set in ms. This option is defaulted to 500ms.

Select background colour

() => {
  const Example = () => {
    const { dimensions } = useWindowResize();
    const throttledDimensions = useThrottle(dimensions, { limit: 1000 });

    return (
      <div>
        Window throttledDimensions:
        {throttledDimensions.width} x {throttledDimensions.height}
      </div>
    );
  }

  return <Example />;
}

() => {
  const Example = () => {
    const { dimensions } = useWindowResize();
    const throttledDimensions = useThrottle(dimensions, { limit: 1000 });

    return (
      <div>
        Window throttledDimensions:
        {throttledDimensions.width} x {throttledDimensions.height}
      </div>
    );
  }

  return <Example />;
}