Composables
useSplitText
Documentation for useSplitText composable.
The useSplitText composable wraps the splitText function from AnimeJS.
A lightweight, responsive and accessible text utility function to split, clone and wrap lines, words and characters of an HTML Element.
Arguments
target
MaybeRef<SplitTextTargets> required
The element or selector containing the text to split.
parameters
MaybeRefOrGetter<TextSplitterParams>
Example
Hello World!
import { stagger } from '#nanime/utils'
const text = useTemplateRef('phrase')
const { chars } = useSplitText(text, {
chars: true,
})
useAnimate(chars, {
y: [{ to: '-30%' }, { to: 0 }],
delay: stagger(50),
duration: 600,
ease: 'inOutCirc',
loop: true,
})
<template>
<span ref="phrase" class="text-xl text-default font-mono">
Hello World!
</span>
</template>
Return Value
Returns an object with reactive references to the split elements and computed accessors.
| Property | Type | Description |
|---|---|---|
lines | Ref<HTMLElement[]> | Array containing line elements. |
words | Ref<HTMLElement[]> | Array containing word elements. |
chars | Ref<HTMLElement[]> | Array containing character elements. |
properties | `ComputedRef<NonFunctionProperties | undefined>`{lang="ts-type"} |
methods | `ComputedRef<OnlyFunctionProperties | undefined>`{lang="ts-type"} |
API
Types
function useSplitText(
target: MaybeRef<SplitTextTargets>,
parameters?: MaybeRefOrGetter<TextSplitterParams>
): {
lines: Ref<HTMLElement[]>,
words: Ref<HTMLElement[]>,
chars: Ref<HTMLElement[]>,
properties: ComputedRef<NonFunctionProperties<TextSplitter> | undefined>,
methods: ComputedRef<OnlyFunctionProperties<TextSplitter> | undefined>,
}
type SplitTargets = HTMLElement | string
type SplitTextTargets = SplitTargets | MaybeElementRef<HTMLElement> | null | undefined | MaybeElementRef<VueInstance>
See AnimeJS Text documentation for more details.