resizer-box

resizer-box

resizer-box is a web component that helps you resize any HTML element in any direction you want.

Tech Stack

This is a web component written in vanilla js without any external dependencies. Being a web component it is compatible with all the existing frameworks (React, Angular, Vue etc.) and with all browsers.

Demo

You can test it here: demo

Install

Import in Browser ( Recommend )

Use the script tag and the src from unpkg with the latest version. Being a web component, once you add the script it will be automatically created and you can start using it.

<script type="module" src="https://unpkg.com/resizer-box@latest/lib/resizer-box.min.js"></script>

Usage

<resizer-box
    width="300px"
    height="200px"
    resize-right
>
    <div class="myBox" slot="content">
        <img src="./assets/demo-img.jpg" alt="demo-img" width="400" height="400">
        <h1>Test 123</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
    </div>
</resizer-box>

In the example above the resize-box component wraps the div#myBox so that we can resize the div#myBox. An important aspect is to add slot="content" attribute for the element that you want to resize.

Attributes

Attribute	Mandatory	Description	Value
width	true	The initial width of the element	px - eg. 200px
height	true	The initial height of the element	px - eg. 200px
resize-right	false	The possibility to resize starting from the right	boolean - true/false
resize-left	false	The possibility to resize starting from the left	boolean - true/false
resize-bottom	false	The possibility to resize starting from the bottom	boolean - true/false
resize-top	false	The possibility to resize starting from the top	boolean - true/false
resize-bottom-right	false	The possibility to resize starting from the bottom right	boolean - true/false
resize-bottom-left	false	The possibility to resize starting from the bottom left	boolean - true/false
resize-top-left	false	The possibility to resize starting from the top left	boolean - true/false
resize-top-right	false	The possibility to resize starting from the top right	boolean - true/false
max-width	false	The max width to which an element can be resized	px - eg. 200px
min-width	false	The min width to which an element can be resized	px - eg. 200px
max-height	false	The max height to which an element can be resized	px - eg. 200px
min-height	false	The min height to which an element can be resized	px - eg. 200px

Events

The component dispatches the resize event with the new width and height of the HTML element based on the user interaction.

const resizeBox = document.querySelector("resizer-box");

resizeBox.addEventListener("resize", (e) => {
  const { width, height } = e.detail;
  ...
});

Styling

By default all the handles come with a default width and color on hover.

You can style all the handles by using the CSS ::part pseudo-element.

resizer-box::part(handle):hover {
  background-color: blueviolet;
}

resizer-box::part(handle-bottom):hover {
  background-color: green;
}

resizer-box::part(handle-bottom-left):hover {
  background-color: red;
}

The parts that are exposed for styling are:

• handle (apply to all the handles)
• handle-right
• handle-left
• handle-top
• handle-bottom
• handle-bottom-right
• handle-bottom-left
• handle-top-left
• handle-top-right