Element resize event for Preact
MIT License
Watch an element for changes to its size. Supports modern browsers and IE9+.
This is a Preact component wrapper for the excellent ResizeObserver polyfill.
npm install preact-resize-observer
import { Component } from 'preact';
import ResizeObserver from 'preact-resize-observer';
export default class App extends Component {
handleResize = (width, height) => {
// Current width and height of the .fluid-content element
console.log(`width: ${width}, height: ${height}`)
}
render(props) {
return (
<ResizeObserver class="fluid-content" onResize={this.handleResize}>
<p>{props.content}</p>
</ResizeObserver>
);
}
}
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
|
1.0.0 (24/06/2018)
tag
prop to control the tag to render asinnerRef
prop to get a reference to the actual DOM node0.1.1 (31/05/2018)
0.1.0 (20/03/2018)
preact-resize-obsever
is available under the MIT License.