https://github.com/mjdease/preact-resize-observer

Element resize event for Preact
https://github.com/mjdease/preact-resize-observer

preact preact-components resize-observer typescript

Last synced: 4 months ago
JSON representation

Element resize event for Preact

• Host: GitHub
• URL: https://github.com/mjdease/preact-resize-observer
• Owner: mjdease
• License: mit
• Created: 2018-03-10T17:54:30.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-09-24T03:13:27.000Z (over 6 years ago)
• Last Synced: 2024-09-30T08:05:17.576Z (4 months ago)
• Topics: preact, preact-components, resize-observer, typescript
• Language: TypeScript
• Homepage: https://mjdease.github.io/preact-resize-observer/demo/
• Size: 4.12 MB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
preact-resize-observer

---

[![Build Status](https://travis-ci.com/mjdease/preact-resize-observer.svg?branch=master)](https://travis-ci.com/mjdease/preact-resize-observer)

[![codecov](https://codecov.io/gh/mjdease/preact-resize-observer/branch/master/graph/badge.svg)](https://codecov.io/gh/mjdease/preact-resize-observer)

[![npm version](https://badge.fury.io/js/preact-resize-observer.svg)](https://badge.fury.io/js/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](https://github.com/que-etc/resize-observer-polyfill).

[Demo](https://mjdease.github.io/preact-resize-observer/demo/)

### Installation

`npm install preact-resize-observer`

### Example

```js

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 (

      

        
{props.content}

      

    );

  }

}

```


### 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.