preact-resize-observer
Watch an element for changes to its size. Supports modern browsers and IE9+.
This is a Preact component wrapper for the excellent ResizeObserver polyfill.
Installation
npm install preact-resize-observer
Example
;; { // Current width and height of the .fluid-content element console } { return <ResizeObserver class="fluid-content" onResize=thishandleResize> <p>propscontent</p> </ResizeObserver> ; }
Prop Types
Property | Type | Default | Description |
---|---|---|---|
onResize |
Function | Required. Callback invoked whenever the observed element changes size. (width: number, height: number): void |
|
horizontal |
boolean | true |
Observe changes to the width |
vertical |
boolean | true |
Observe changes to the height |
tag |
string | 'div' |
The HTML tag to render this component as |
element |
Element | The element to observe the size of. If not specified the element rendered by this component will be observed | |
initial |
boolean | true |
Controls if onResize will be invoked when the element is first observed (typically on mount). Set to false to disable this initial call. |
innerRef |
function | Get reference to the rendered element. (element: Element): void |
Changelog
1.0.0 (24/06/2018)
- Change component design to be used as part of regular page markup:
- Change to observe size of self by default (previously parent was observed)
- Add support to render children
- Add
tag
prop to control the tag to render as - Add
innerRef
prop to get a reference to the actual DOM node - Change prop names to avoid clashing with standard HTML attributes
- Distribute ES module
0.1.1 (31/05/2018)
- Fixed package dependencies
- Fixed component types for Preact 8.2.9
0.1.0 (20/03/2018)
- Initial Release
Licence
preact-resize-obsever
is available under the MIT License.