useRiffle()
useRiffle(
options):object
Defined in: vue/useRiffle.ts:20
Accepts a ref, a getter, or a plain options object, and returns state,
activeIndex, the two directives (vRiffleRoot, vRiffleCard), and the
imperative handle (next, prev, goTo, on, instance). Options are
compared with the previous set inside a watch, and only what changed
reaches the engine’s update().
Parameters
Section titled “Parameters”options
Section titled “options”MaybeRefOrGetter<RiffleOptions>
Returns
Section titled “Returns”activeIndex
Section titled “activeIndex”activeIndex:
ComputedRef<number>
goTo: (
index,opts?) =>void=handle.goTo
Moves to index, animated unless opts.animate is false. A no-op while unmounted.
Parameters
Section titled “Parameters”number
animate?
Section titled “animate?”boolean
Returns
Section titled “Returns”void
next: () =>
void=handle.next
Advances to the next card, animated. A no-op while unmounted.
Returns
Section titled “Returns”void
on: <
K>(event,fn) => () =>void=handle.on
Subscribes to one engine event. Returns an unsubscribe function; a no-op while unmounted.
Type Parameters
Section titled “Type Parameters”K extends keyof RiffleEventMap
Parameters
Section titled “Parameters”K
(payload) => void
Returns
Section titled “Returns”() => void
prev: () =>
void=handle.prev
Moves to the previous card, animated. A no-op while unmounted.
Returns
Section titled “Returns”void
state:
ShallowRef<RiffleSnapshot,RiffleSnapshot>
vRiffleCard
Section titled “vRiffleCard”vRiffleCard:
Directive<HTMLElement,number>
vRiffleRoot
Section titled “vRiffleRoot”vRiffleRoot:
Directive<HTMLElement>
instance
Section titled “instance”Get Signature
Section titled “Get Signature”get instance():
Riffle|null
Returns
Section titled “Returns”Riffle | null
Example
Section titled “Example”import { useRiffle } from '@rpxl/riffle/vue'
const films = [{ title: 'Neon Harbor' }]const riffle = useRiffle(() => ({ count: films.length, cardWidth: 300, cardHeight: 400 }))