useResize

The useResize hook allows you to execute a callback function whenever the window is resized. This can be useful for handling responsive layouts, recalculating element positions, or performing other actions that depend on the window's dimensions. Additionally, the hook provides an option to invoke the callback immediately when the component mounts.

Usage

First, you need to import the useResize hook from the kitchn package.

import { useResize } from "kitchn";

Example

Here is an example of how to use the useResize hook in a component:

() => {
  const [windowSize, setWindowSize] = React.useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useResize(() => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight,
    });
  });

  return (
    <Container>
      <Text>Window Width: {windowSize.width}px</Text>
      <Text>Window Height: {windowSize.height}px</Text>
    </Container>
  );
};

() => {
  const [windowSize, setWindowSize] = React.useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useResize(() => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight,
    });
  });

  return (
    <Container>
      <Text>Window Width: {windowSize.width}px</Text>
      <Text>Window Height: {windowSize.height}px</Text>
    </Container>
  );
};

Parameters

The useResize hook accepts the following parameters:

Return Value

The useResize hook does not return any value.