Resize Bounding is a simple component for Vue3/React that allows you to intuitively resize nested content using draggable border panels.
| 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> ); }Licensing is in accordance with the original.
Mikhail Grebennikov - yamogoo