Skip to content

Commit 1bcc17e

Browse files
authored
Update README.md
1 parent ded5a3b commit 1bcc17e

File tree

1 file changed

+31
-0
lines changed

1 file changed

+31
-0
lines changed

README.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff 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

5687
You might want to receive values less frequently than changes actually occur.

0 commit comments

Comments
 (0)