File tree Expand file tree Collapse file tree 1 file changed +31
-0
lines changed
Expand file tree Collapse file tree 1 file changed +31
-0
lines changed Original file line number Diff line number Diff line change @@ -51,6 +51,37 @@ You can even reuse the same hook instance to measure different elements:
5151
5252[ CodeSandbox Demo] ( https://codesandbox.io/s/use-resize-observer-reusing-refs-buftd )
5353
54+ ## The "onResize" callback
55+
56+ By the default the hook will trigger a re-render on all changes to the target
57+ element's width and / or height.
58+
59+ You can opt out of this behaviour, by providing an ` onResize ` callback function,
60+ which'll simply receive the width and height of the element when it changes, so
61+ that you can decide what to do with it:
62+
63+ ``` js
64+ import React from " react" ;
65+ import useResizeObserver from " use-resize-observer" ;
66+
67+ const App = () => {
68+ // width / height will not be returned here when the onResize callback is present
69+ const { ref } = useResizeObserver ({
70+ onResize : ({ width, height }) => {
71+ // do something here.
72+ }
73+ });
74+
75+ return < div ref= {ref} / > ;
76+ };
77+ ```
78+
79+ This callback also makes it possible to implement your own hooks that report only
80+ what you need, for example:
81+
82+ - Reporting only width or height
83+ - Throttle / debounce
84+
5485## Throttle / Debounce
5586
5687You might want to receive values less frequently than changes actually occur.
You can’t perform that action at this time.
0 commit comments