# on-el-resize

> On HTML element resize event helper

Latest version **0.0.4** (published 2018-08-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install on-el-resize
pnpm add on-el-resize
yarn add on-el-resize
bun add on-el-resize
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2018-08-26 |
| First published | 2018-08-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Andrew Koltyakov |
| Maintainers | koltyakov |
| Keywords | html, resize, event, typescript, javascript |

## Links

- npm: https://www.npmjs.com/package/on-el-resize
- Repository: https://github.com/koltyakov/on-el-resize
- Homepage: https://github.com/koltyakov/on-el-resize#readme
- Issues: https://github.com/koltyakov/on-el-resize/issues
- npm.io page: https://npm.io/package/on-el-resize

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.0.4 (latest) — 2018-08-26
- 0.0.3 — 2018-08-26
- 0.0.2 — 2018-08-24
- 0.0.1 — 2018-08-24

## README

# on-el-resize - on HTML element resize event helper

[![NPM](https://nodei.co/npm/on-el-resize.png?mini=true&downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/on-el-resize)

[![npm version](https://badge.fury.io/js/on-el-resize.svg)](https://badge.fury.io/js/on-el-resize)
[![Downloads](https://img.shields.io/npm/dm/on-el-resize.svg)](https://www.npmjs.com/package/on-el-resize)

`on-el-resize` is a simple helper which provides an API for attaching resize event firing to HTML elements.

This can simplify creation of some dynamic and responsive components which styles and structure depend on absolute width and height values.

## Install

```bash
npm install on-el-resize # or yarn add on-el-resize
```

## Usage

### TypeScript / JavaScript

```typescript
import { Resize } from 'on-el-resize';

const resize = new Resize();
const element = document.querySelector('.selector');

const resizeHandler = () => {
  console.log({
    width: element.offsetWidth,
    heigth: element.offsetHeight
  });
};

// Attach event
resize.addResizeListener(element, resizeHandler);

// Detach event
resize.removeResizeListener(element, resizeHandler);
```

### React component sample

```typescript
import * as React from 'react';
import { Resize } from 'on-el-resize';

export interface IProps {}

export interface IState {
  componentWidth?: number;
  componentHeight?: number;
}

export class Example extends React.Component<IProps, IState> {

  private parentRef: HTMLElement;
  private resize: Resize;

  constructor(props: IProps) {
    super(props);
    this.resize = new Resize();
    this.state = {};
    this.onComponentResize = this.onComponentResize.bind(this);
  }

  public render() {
    return (
      <div ref={el => this.parentRef = el}>
        <div>Width: {this.state.componentWidth}</div>
        <div>Height: {this.state.componentHeight}</div>
      </div>
    );
  }

  public componentDidMount() {
    this.resize.addResizeListener(this.parentRef, this.onComponentResize);
    this.onComponentResize();
  }

  public componentWillUnmount() {
    this.resize.removeResizeListener(this.parentRef, this.onComponentResize);
  }

  private onComponentResize() {
    this.setState({
      componentWidth: this.parentRef.offsetWidth,
      componentHeight: this.parentRef.offsetHeight
    });
  }

}
```

### React declarative approach

> Component is in draft status

```typescript
import * as React from 'react';

import { Resizable } from 'on-el-resize/lib/components';

export default class Example extends React.Component<{}, {}> {

  public render() {
    return (
      <Resizable render={({ width }) => <div>Width: {width}</div>} />
    );
  }

}
```

---
_Source: https://npm.io/package/on-el-resize · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._