# resizable

> Resizable behaviour for elements

Latest version **2.0.0** (published 2024-10-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install resizable
pnpm add resizable
yarn add resizable
bun add resizable
```

## Health

**Score 40/100 (D)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2024-10-18 |
| First published | 2014-10-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 158.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 80 |
| Author | Dmitry Iv |
| Maintainers | dfcreative |
| Keywords | resizable, UI, draggable, draggy |

## Links

- npm: https://www.npmjs.com/package/resizable
- Repository: https://github.com/dy/resizable
- Issues: https://github.com/dy/resizable/issues
- npm.io page: https://npm.io/package/resizable

## Dependencies (3)

- [emmy](https://npm.io/package/emmy.md) ^7.1.1
- [mucss](https://npm.io/package/mucss.md) ^1.0.2
- [draggy](https://npm.io/package/draggy.md) ^2.0.5

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2024-10-18
- 1.2.1 — 2018-09-21
- 1.2.0 — 2016-07-01
- 1.1.3 — 2016-05-04
- 1.1.2 — 2016-05-04
- 1.1.1 — 2016-02-18
- 1.1.0 — 2016-01-10
- 1.0.5 — 2015-12-21
- 1.0.4 — 2015-07-30
- 1.0.2 — 2015-07-24
- 1.0.1 — 2015-07-24
- 0.1.2 — 2014-11-06
- 0.1.1 — 2014-11-06
- 0.1.0 — 2014-11-05
- 0.0.5 — 2014-11-05
- … 2 more at https://npm.io/package/resizable/versions

## README

# Resizable

Resizable behaviour for elements. [Demo](https://dy.github.io/resizable).

[![npm install resizable](https://nodei.co/npm/resizable.png?mini=true)](https://nodei.co/npm/resizable/)


```js
import Resizable from 'resizable';

var resizable = new Resizable(document.querySelector('.my-element'), {
	within: 'parent',
	handles: 's, se, e',
	threshold: 10,
	draggable: false
});

resizable.on('resize', function(){
	//...
});
```

## Options

| Parameter | Default | Description |
|---|:---:|---|
| `handles` | * | List of handles to support. Valid handles: `s`, `se`, `e`, `ne`, `n`, `nw`, `w`, `sw`. May be specified as an object, array, or comma-separated string. |
| `resize` | `undefined` | Resize event handler. |
| `threshold` | `10` | A movement threshold required to start resize - whether array, number or function. |
| `within` | `document` | Restrict movement within the container. Pass `'parent'` to take parent node. |
| `draggable` | `false` | Make element [draggable](http://github.com/dfcreative/draggy) as well. Set an object to pass options to draggable. |
| `css3` | `true` | Use `translate3d` for defining position. |

\* Default handles are dependent on the styling of the given element. Inline
elements will default to `s`, `se`, `e`, while elements that can support full
resize will default to all handles being enabled.

## Events

| Name | Description |
|---|---|
| `resizestart` | Element resize started. |
| `resize` | Element resized. |
| `resizeend` | Element resize ended. |

## License

MIT

<p align=center><a href="https://github.com/krishnized/license/">🕉</a></p>

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