# ✨ useResize
The
useResize ()function is used to return a copy of the filtered object using the givenkeyvalue. This function provides the desired condition by specifying which properties are selected from the object.
# 🍁 Usage
The example usage of useResize function is shown below.
import { useResize } from 'vue-composable-utils'; const { screenWidth, screenHeight, ratiowh, ratiohw, rect } = useResize(resizeRef);Copied!
# 🚀 Features
useResize takes two parameters.
| Parameter | Description |
|---|---|
screenWidth | The object to be processed. |
screenHeight | Optional. The key value that should be selected. |
# 💐 Example
You can see how it changes reactively using the example below.
{
"screenWidth": 1440,
"screenHeight": 718,
"ratiowh": 2.0055710306406684,
"ratiohw": 0.4986111111111111,
"rect": {
"width": 740,
"height": 176.34375,
"left": 510,
"right": 1250,
"top": 843.046875,
"bottom": 1019.390625
}
}template
javascript
scss
<template> <div ref="resizeRef"> <pre class="resize">{{ JSON.stringify({ screenWidth, screenHeight, ratiowh, ratiohw, rect }, undefined, 2) }}</pre> </div> </template>Copied!