Resize Bounding is a simple component for Vue3/React that allows you to intuitively resize nested content using draggable border panels.

Demo

	Package name	Installation	Links	Version / License
	Vue3 Resize Bounding	npm i vue3-resize-bounding	Documentation Example Repository
	React Resize Bounding	npm i react-resize-bounding	Documentation Example Repository
	Design UI Component		Figma

---

Vue3 Usage

<!-- @filename: MyComponent.vue -->
<script setup lang="ts">
import { ref } from "vue";
import ResizeBounding from "vue3-resize-bounding";

const container = ref({
  width: 320,
  height: 480,
});

const options = {
  knob: {
    show: true,
  },
};
</script>

<template>
  <ResizeBounding
    v-model:width="container.width"
    v-model:height="container.height"
    :min-width="240"
    :max-width="480"
    :min-height="120"
    directions="hv"
    :options="options"
    :style="{ border: '1px solid gray' }"
  >
    <!-- CONTENT START -->
    <div :style="{ width: '100%', height: '100%' }">
      My Container
    </div>
    <!-- CONTENT END -->

    <!-- KNOB INNER CONTENT START -->
    <template #knob>
      <div class="some-icon" />
    </template>
    <!-- KNOB INNER CONTENT END -->
  </ResizeBounding>
</template>

React Usage

// @filename: MyComponent.tsx (.js)
import { useState } from "react";
import ResizeBounding from "react-resize-bounding";

export default function App() {
  const [width, setWidth] = useState(320);
  const [height, setHeight] = useState(480);

  return (
    <ResizeBounding
      width={width}
      height={height}
      directions="hv"
      updateWidth={(width) => setWidth(width)}
      updateHeight={(height) => setHeight(height)}
      style={{ border: "1px solid gray" }}
      options={{
        knob: {
          show: true,
        },
      }}
    >
      {/* CONTENT START */}
      <div style={{ width: "100%", height: "100%" }}>My Container</div>
      {/* CONTENT END */}
    </ResizeBounding>
  );
}

---

License

Licensing is in accordance with the original.

MIT

Author

Mikhail Grebennikov - yamogoo