https://github.com/yamogoo/resize-bounding

Highly customizable Vue3/React component for resizing nested content
https://github.com/yamogoo/resize-bounding

bounding bounding-box draggable draggable-panel react-resize-bounding react-resizer resizer resizer-block ui-component vue3-resize-bounding vue3-resizer

Last synced: 3 months ago
JSON representation

Highly customizable Vue3/React component for resizing nested content

• Host: GitHub
• URL: https://github.com/yamogoo/resize-bounding
• Owner: yamogoo
• License: mit
• Created: 2024-06-22T22:53:35.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2025-09-25T11:04:24.000Z (9 months ago)
• Last Synced: 2025-09-25T13:07:38.127Z (9 months ago)
• Topics: bounding, bounding-box, draggable, draggable-panel, react-resize-bounding, react-resizer, resizer, resizer-block, ui-component, vue3-resize-bounding, vue3-resizer
• Language: TypeScript
• Homepage: https://resize-bounding.netlify.app/
• Size: 5.83 MB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
![image](/shared/images/resize-bounding-w-descriptor.svg)

![image](https://github.com/yamogoo/resize-bounding/blob/v.2.1.0/shared/images/resize-bounding.gif)

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

[Demo](https://resize-bounding.netlify.app/)

|                                         | Package name                                                             | Installation                  | Links                                                                                                                                                                                                                                                                                                           | Version / License                                                                                                                             |

| --------------------------------------- | ------------------------------------------------------------------------ | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |

| ![image](/shared/images/vue-logo.svg)   | [Vue3 Resize Bounding](/packages/vue/vue3-resize-bounding/README.md)     | `npm i vue3-resize-bounding`  | [Documentation](https://vue3-resize-bounding-docs.netlify.app/?path=/story/sandbox-examples--cover)[Example](https://stackblitz.com/edit/vue3-resize-bounding-example?file=src%2FApp.vue)[Repository](https://github.com/yamogoo/resize-bounding/tree/v.2.1.0/packages/vue/vue3-resize-bounding)      | ![Version](https://img.shields.io/badge/version-2.1.4-green) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](./LICENSE) |

| ![image](/shared/images/react-logo.svg) | [React Resize Bounding](/packages/react/react-resize-bounding/README.md) | `npm i react-resize-bounding` | [Documentation](https://react-resize-bounding-docs.netlify.app/?path=/story/sandbox-examples--cover)[Example](https://stackblitz.com/edit/react-resize-bounding-example?file=src%2FApp.tsx)[Repository](https://github.com/yamogoo/resize-bounding/tree/v.2.1.0/packages/react/react-resize-bounding) | ![Version](https://img.shields.io/badge/version-1.1.2-blue) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)   |

| ![image](/shared/images/figma-logo.svg) | Design UI Component                                                      |                               | [Figma](https://www.figma.com/community/file/1392603830584852243)                                                                                                                                                                                                                                               | [![License: MIT](https://img.shields.io/badge/License-CCBY4.0-red.svg)](https://creativecommons.org/licenses/by/4.0/)                         |

---

**Vue3 Usage**

```html

  import { ref } from "vue";

  import ResizeBounding from "vue3-resize-bounding";

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

   (container.width = width)"

    @update:height="(height) => (container.height = height)"

  >

    

    
My Container

    


    

    

      


    

    

  


```

**React Usage**

```tsx

// @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 (

     setWidth(width)}

      updateHeight={(height) => setHeight(height)}

      style={{ border: "1px solid gray" }}

      options={{

        knob: {

          show: true,

        },

      }}

    >

      {/* CONTENT START */}

      
My Container

      {/* CONTENT END */}

    

  );

}

```


---

## License

Licensing is in accordance with the original.

[MIT](https://github.com/yamogoo/resize-bounding/blob/main/LICENSE)

## Author

**Mikhail Grebennikov** - [yamogoo](https://github.com/yamogoo)