useResize(๐Ÿ› )

August 03, 2020ย ย โ€ขย ย 1 min read

#3 hook of the week

To remind you of the purpose and goal of this week:

For a whole week I'll post a new hook every day. All hooks will support Server-Side Rendering (SSR) and have TypeScript implemented.

I will not describe the hooks in great detail, I'll just present them and show how it's implemented. Then you can do whatever you want with them.

Every hook is also available here, together with a range of other hooks.

View source

The hook ๐ŸŽฃ

A callback will be triggered when a resize event takes place. The hook can be debounced to be helpful to the browser.

I'm using my useEventListener() hook to listen for resize events.

import { useMemo } from 'react';
import { debounce } from 'lodash';
import { useEventListener } from './useEventListener';

export const useResize = (
  callback: (event: Event) => void,
  wait: number = 250
): void => {
  const handleResize = useMemo(
    () =>
      wait !== 0
        ? debounce((event: Event) => callback(event), wait)
        : (event: Event) => callback(event),
    [wait, callback]
  );

  useEventListener({
    type: 'resize',
    listener: handleResize,
    options: { passive: true }
  });
};

Usage

On resize we console.log() its event and debounce it with a 500 milliseconds wait timeout.

import React from 'react';
import { useResize } from './useResize';

const Component = () => {
  useResize((event) => {
    console.log(event);
  }, 500);

  return null;
};

export default Component;

The end ๐Ÿ› 

I hope you found this helpful.