RiffleProps<T>

Defined in: react/Riffle.tsx:100

Props for the <Riffle> drop-in. Every RiffleOptions key except count (derived from cards.length) is a prop here too.

Example

import type { RiffleProps } from '@rpxl/riffle/react'

const films = [{ title: 'Neon Harbor' }]
const props: RiffleProps<{ title: string }> = {
  cards: films,
  children: (film) => <div>{film.title}</div>,
}

Extends

• Omit<RiffleOptions, "count">.Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "draggable">

Type Parameters

T

T

Properties

axis?

optional axis?: Axis

Defined in: types.ts:198

The drag axis. Default 'x'. Immutable after construction: update() throws on a change.

Inherited from

RiffleOptions.axis

---

bounds?

optional bounds?: Bounds

Defined in: types.ts:196

'loop' wraps past the ends, 'clamp' stops there. Default 'loop'.

Inherited from

RiffleOptions.bounds

---

cardClassName?

optional cardClassName?: string

Defined in: react/Riffle.tsx:115

A class applied to every card element.

---

cardHeight?

optional cardHeight?: number | "auto"

Defined in: types.ts:190

Pixels, or 'auto' to measure a registered card. Default 400 when omitted as a number.

Inherited from

RiffleOptions.cardHeight

---

cards

cards: readonly T[]

Defined in: react/Riffle.tsx:105

The cards to render. Each becomes one registered card, in order.

---

cardWidth?

optional cardWidth?: number | "auto"

Defined in: types.ts:188

Pixels, or 'auto' to measure a registered card. Default 300 when omitted as a number.

Inherited from

RiffleOptions.cardWidth

---

children

children: (card, index) => ReactNode

Defined in: react/Riffle.tsx:107

Renders one card’s content.

Parameters

card

T

index

number

Returns

ReactNode

---

crossFollow?

optional crossFollow?: number

Defined in: types.ts:212

How much the card follows the finger across the axis, 0..1. Default 0.18.

Inherited from

RiffleOptions.crossFollow

---

draggable?

optional draggable?: boolean

Defined in: types.ts:206

Whether dragging is enabled. Keyboard navigation stays on regardless. Default true.

Inherited from

RiffleOptions.draggable

---

flingVelocity?

optional flingVelocity?: number

Defined in: types.ts:202

Pixels per millisecond. Default 0.5.

Inherited from

RiffleOptions.flingVelocity

---

gap?

optional gap?: number

Defined in: types.ts:192

Pixels of space the default fan layout leaves between cards. Default 20.

Inherited from

RiffleOptions.gap

---

getKey?

optional getKey?: (card, index) => Key

Defined in: react/Riffle.tsx:109

Stable key per card. Defaults to the index; provide one for lists that reorder.

Parameters

card

T

index

number

Returns

Key

---

getLabel?

optional getLabel?: (index) => string

Defined in: types.ts:222

A caller-supplied label per card index. The card’s aria-label becomes ${getLabel(i)}, ${i + 1} of ${count}, and announcements use the same string. Omit it for the bare position.

Parameters

index

number

Returns

string

Inherited from

RiffleOptions.getLabel

---

layout?

optional layout?: LayoutStrategy

Defined in: types.ts:216

The pose strategy. Default fan().

Inherited from

RiffleOptions.layout

---

maxVisible?

optional maxVisible?: number

Defined in: types.ts:194

How many cards behind the front one stay visible before fading out. Default 4.

Inherited from

RiffleOptions.maxVisible

---

onChange?

optional onChange?: (event) => void

Defined in: react/Riffle.tsx:111

Fires whenever the active index changes, whether from a drag, a button, or goTo().

Parameters

event

direction

-1 | 1

index

number

previousIndex

number

Returns

void

---

reducedMotion?

optional reducedMotion?: ReducedMotionMode

Defined in: types.ts:214

Whether to honour prefers-reduced-motion. Default 'auto'.

Inherited from

RiffleOptions.reducedMotion

---

ref?

optional ref?: Ref<HTMLDivElement>

Defined in: react/Riffle.tsx:117

The root element. Composed with Riffle’s own root ref; see the Riffle doc comment.

---

riffleRef?

optional riffleRef?: Ref<RiffleInstance | null>

Defined in: react/Riffle.tsx:113

Receives the imperative handle, for controls such as external next and prev buttons.

---

rotation?

optional rotation?: false | RotationOptions

Defined in: types.ts:210

Tilt while dragging, or false to disable it. Default the RotationOptions defaults.

Inherited from

RiffleOptions.rotation

---

spring?

optional spring?: SpringPreset | SpringConfig

Defined in: types.ts:208

A named preset, or your own stiffness and damping. Default { stiffness: 340, damping: 34 }.

Inherited from

RiffleOptions.spring

---

startIndex?

optional startIndex?: number

Defined in: types.ts:204

The active card at construction. Read once; call goTo to move later. Default 0.

Inherited from

RiffleOptions.startIndex

---

threshold?

optional threshold?: number

Defined in: types.ts:200

Fraction of one step, 0..1. Default 0.25.

Inherited from

RiffleOptions.threshold