# ✨ useResize
The
useResize ()
function is used to return a copy of the filtered object using the givenkey
value. 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!