RiffleInstance

Defined in: react/Riffle.tsx:68

What riffleRef receives: imperative control and a read of the current state. The same members as the Vue drop-in’s template ref. Reading activeIndex or state here does not re-render anything; use onChange for that.

Example

import { useRef } from 'react'
import { Riffle, type RiffleInstance } from '@rpxl/riffle/react'

function Stack({ films }: { films: { title: string }[] }) {
  const riffleRef = useRef<RiffleInstance>(null)
  return (
    <Riffle riffleRef={riffleRef} cards={films} cardWidth={300} cardHeight={400}>
      {(film) => <div>{film.title}</div>}
    </Riffle>
  )
}

Properties

activeIndex

readonly activeIndex: number

Defined in: react/Riffle.tsx:80

The card currently at the front. Not reactive; read it, do not watch it.

---

instance

readonly instance: Riffle | null

Defined in: react/Riffle.tsx:78

The live engine, or null before mount and after unmount.

---

on

on: <K>(event, fn) => () => void

Defined in: react/Riffle.tsx:76

Subscribes to one engine event. Returns an unsubscribe function.

Subscribes to one engine event. Returns an unsubscribe function; a no-op while unmounted.

Type Parameters

K

K extends keyof RiffleEventMap

Parameters

event

K

fn

(payload) => void

Returns

() => void

---

state

readonly state: RiffleSnapshot

Defined in: react/Riffle.tsx:82

The full current snapshot. Not reactive; read it, do not watch it.

Methods

goTo()

goTo(index, opts?): void

Defined in: react/Riffle.tsx:74

Moves to index, animated unless opts.animate is false.

Parameters

index

number

opts?

animate?

boolean

Returns

void

---

next()

next(): void

Defined in: react/Riffle.tsx:70

Advances to the next card, with the spring’s animation.

Returns

void

---

prev()

prev(): void

Defined in: react/Riffle.tsx:72

Moves to the previous card, with the spring’s animation.

Returns

void