LayoutGroup

like LayoutGroup in framer-motion, the LayoutGroup will detect the layout changes of its children and apply the layout animations.

Props

id

A unique identifier for the layout group. If not provided, the group will be identified by its context.

inherit

Controls how the layout group inherits properties from its parent group. It can be:

• true: Inherit both id and group.
• id: Only inherit the id.
• group: Only inherit the group.

Slots

default: The default slot receives forceRender function:

• forceRender: A function that, when called, forces the slot Motion component to calculate its layout.

<LayoutGroup>
  <template #default="{ forceRender }">
    ...
    <Motion :layout="true" @click="forceRender">
    </Motion>
    ...
  </template>
</LayoutGroup>

useLayoutGroup Hook

The useLayoutGroup hook provides access to the layout group context, allowing components to participate in the layoutGroup and respond to forced layout.

<script setup lang="ts">
import { useLayoutGroup } from 'motion-v'

const { forceRender } = useLayoutGroup()
</script>

<template>
  <div>
    <p>This component can be forced to update.</p>
    <button @click="forceRender">
      Force Update
    </button>
  </div>
</template>