Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
onResize
function to optimize its usage. Eliminated redundantuseEffect
calls and integrated theonResize
method with thesetSize
call. This change was inspired by this article.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 aResizeObserverEntry
object as the newentry
prop.onResize
function into ref to avoid rerenders when passed to a dependency arrayobserverOptions.box
parameter (Return width according to provided observerOptions #220)../types
fileReactResizeDetectorDimensions
toDimensions
📄 Chore / Docs
lint
andlint-fix
commands to always fix auto-fixable problems.directories
declaration inpackage.json
.🚀 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 theuseResizeDetector
behavior. Interactive examples demonstrate the functionality ofobserverOptions.box
andrefreshMode
. 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.onResize
function now receives a single object. Destructurewidth
andheight
parameters as follows:When the element is mounted,
width
andheight
will always be numbers. When unmounted, they will benull
.Ensure to add null checks before accessing element dimensions to address TypeScript errors.
Note that
entry
, a ResizeObserverEntry triggered byResizeObserver
, is now accessible. This provides access toborderBoxSize
,contentBoxSize
, andtarget
, useful for custom logic or calculating border/padding size.Refer to the ResizeObserverEntry documentation.
If
observerOptions.box
is set toborder-box
, the returnedwidth
andheight
from theuseResizeDetector
hook will include the padding and border size of the element. Default behavior remains unchanged - padding and border size are not included.Rename
ReactResizeDetectorDimensions
toDimensions