# ✨ useResize

The useResize () function is used to return a copy of the filtered object using the given key 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>
  <div ref="resizeRef">
    <pre class="resize">{{ JSON.stringify({ screenWidth, screenHeight, ratiowh, ratiohw, rect }, undefined, 2) }}</pre>
  </div>
</template>
Copied!