resize-observer-vue

🏄‍♀️ docs
Or if you want to use react 🤸‍♂️ for react

The width of the case box is 100% by default. You need to manually switch the viewport width

what？🙊

Whether the size and location of the listening component have changed, Only support vue3

How to use it? 🙈

pnpm add resize-observer-vue

1. Similar to the use of react high-order components

import

import { createApp } from 'vue'
import ResizeObserver from 'resize-observer-vue'
import App from './example/App.vue'

const app = createApp(App)

app.use(ResizeObserver).mount('#app')

Or introduced as a component

import { ResizeObserver } from 'resize-observer-vue'

use

<ResizeObserver :on-resize="callback" :disabled="false">
    <TargetComponent/>
<ResizeObserver/>

2. The same supports vue instructions

registration Directive

import { directive } from 'resize-observer-vue'
const app = createApp({})

app.directive('resize', directive)

use

<TargetComponent v-resize:[disabled]="callback" />

3. No longer provide the way of hooks

Originally, the use of hooks can also be as simple as the following

const targetRef = ref()
useResize(targetRef, () => {
  // ...
})

<TargetComponent ref="targetRef" />

But unfortunately, in the setup syntax of vue3, it is no longer possible to simply obtain instances of subcomponents through ref. Must be exported manually. but i see no value in doing this

API

Property	Type	Default	Description
disabled	boolean	false	Whether to disable observation
onResize	({ width, height }) => void	-	Trigger when child node resized