hcg-resizable

Lightweight resizable elements for vanilla JavaScript. Zero dependencies.

• GitHub: github.com/html-code-generator/hcg-resizable
• npm: npmjs.com/package/hcg-resizable
• Documentation & demo: html-code-generator.com/javascript/resizable-library

Install

npm install hcg-resizable

Quick start

Bundler (webpack, Vite, etc.):

import HcgResizable from "hcg-resizable";
import "hcg-resizable/hcg-resizable.css";

HcgResizable("#panel", { handles: ["se"], containment: "parent" });

CommonJS:

const HcgResizable = require("hcg-resizable");
require("hcg-resizable/hcg-resizable.css");

Script tag (CDN):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hcg-resizable@1/hcg-resizable.css">
<script src="https://cdn.jsdelivr.net/npm/hcg-resizable@1/hcg-resizable.js"></script>

<div id="box" style="position:relative;width:200px;height:120px;">Resize me</div>
<script>
  HcgResizable("#box", { handles: ["se"] });
</script>

Basic usage

const resize = HcgResizable("#box", {
  handles: ["se"],
  minWidth: 80,
  minHeight: 60,
  maxWidth: 400,
  maxHeight: 300,
  aspectRatio: true,
  containment: "parent",
  onResize: function (event, size) {
    console.log(size.width, size.height);
  }
});

Data attributes

<div
  data-hcg-resizable
  data-hcg-handles="se"
  data-hcg-containment="parent">
  Resize me
</div>
<script>
  HcgResizable.init();
</script>

| Attribute | Maps to | | --- | --- | | data-hcg-resizable | init target | | data-hcg-handles | handles | | data-hcg-min-width | minWidth | | data-hcg-min-height | minHeight | | data-hcg-max-width | maxWidth | | data-hcg-max-height | maxHeight | | data-hcg-aspect-ratio | aspectRatio | | data-hcg-containment | containment | | data-hcg-disabled | disabled |

Instance API

const r = HcgResizable("#box");
r.setOption("aspectRatio", true);
r.contain();
r.setSize(200, 120);
r.disable();
r.destroy();

Statics: HcgResizable.init(), HcgResizable.destroyAll().

Documentation

Full API reference, live demos, React examples, and options tables:

https://www.html-code-generator.com/javascript/resizable-library

License

MIT - see LICENSE.