V11

[snelsi]

This PR introduces several changes to the react-resize-detector library, including functional improvements, better handling of parameters, maintenance updates, and the addition of an interactive playground.

✨ Functional Changes

• Revamped the onResize function to optimize its usage. Eliminated redundant useEffect calls and integrated the onResize method with the setSize call. This change was inspired by this article.
• Updated onResize parameters to accept a single object, ensuring proper handling when the element is unmounted. The function now consistently returns width and height as numbers when the element is mounted. Additionally, it now includes a ResizeObserverEntry object as the new entry prop.

type ResizePayload =
  | { width: number; height: number; entry: ResizeObserverEntry }
  | { width: null; height: null; entry: null };

• Wrap onResize function into ref to avoid rerenders when passed to a dependency array
• Adjusted the return values of width and height based on the provided observerOptions.box parameter (#220).
• Export more inner types from the ./types file
• Rename ReactResizeDetectorDimensions to Dimensions
• Group related logic into custom hooks for better readability
• Minor code cleanup

📄 Chore / Docs

• Removed the yarn lock file.
• Updated development dependencies.
• Consolidated lint and lint-fix commands to always fix auto-fixable problems.
• Removed outdated directories declaration in package.json.
• Updated Readme badges and statistics.
• Added more comments to the code

🚀 New Interactive Playground

Demo: https://react-resize-detector.vercel.app/

The /examples folder has been completely revamped. It now includes comprehensive documentation for configuration options, direct links to docs, and an interactive playground to visualize the impact of different parameters on the useResizeDetector behavior. Interactive examples demonstrate the functionality of observerOptions.box and refreshMode. The codebase now includes extensive comments and explanations. Cards within the playground are resizable directly within the view, eliminating the need to resize the browser window. Each card resize is highlighted with a custom effect. The demo is built with Radix Themes.

⚠️ Migration guide

• The onResize function now receives a single object. Destructure width and height parameters as follows:

- onResize: (width, height) => {
+ onResize: ({ width, height, entry }) => {
    if (width && height) {
        ...
    }
}

When the element is mounted, width and height will always be numbers. When unmounted, they will be null. Ensure to add null checks before accessing element dimensions to address TypeScript errors.

Note that entry, a ResizeObserverEntry triggered by ResizeObserver, is now accessible. This provides access to borderBoxSize, contentBoxSize, and target, useful for custom logic or calculating border/padding size. Refer to the ResizeObserverEntry documentation.

• If observerOptions.box is set to border-box, the returned width and height from the useResizeDetector hook will include the padding and border size of the element. Default behavior remains unchanged - padding and border size are not included.

• Rename ReactResizeDetectorDimensions to Dimensions

- import type { ReactResizeDetectorDimensions } from "react-resize-detector/build/types/types"
+ import type { Dimensions } from "react-resize-detector"

[snelsi]

@maslianok 👋 Hey,

It seemed to me that the existing demo was created quite a while ago, hastily put together, and had become very outdated. Feeling inspired, I took the initiative to rewrite it into something more fitting.

Additionally, I've implemented a couple of changes to the internal logic that I hadn’t had the chance to address for a long time.

Please take a look when you have a moment. Thank you!

[snelsi]

New playground demo: https://react-resize-detector.vercel.app/

Existing demo for comparison: https://maslianok.github.io/react-resize-detector/

[maslianok]

Thank you so much!!!! What a great job, @snelsi ❤️

[snelsi]

@maslianok Don't forget to update https://maslianok.github.io/react-resize-detector/ to use the new playground app