RiffleOptions

Defined in: types.ts:184

Everything createRiffle accepts. Only count is required; everything else has a default.

Example

import type { RiffleOptions } from '@rpxl/riffle'

const options: RiffleOptions = { count: 5, cardWidth: 300, cardHeight: 400, bounds: 'clamp' }

Properties

axis?

optional axis?: Axis

Defined in: types.ts:198

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

---

bounds?

optional bounds?: Bounds

Defined in: types.ts:196

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

---

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.

---

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.

---

count

count: number

Defined in: types.ts:186

How many cards are in the stack.

---

crossFollow?

optional crossFollow?: number

Defined in: types.ts:212

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

---

draggable?

optional draggable?: boolean

Defined in: types.ts:206

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

---

flingVelocity?

optional flingVelocity?: number

Defined in: types.ts:202

Pixels per millisecond. Default 0.5.

---

gap?

optional gap?: number

Defined in: types.ts:192

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

---

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

---

layout?

optional layout?: LayoutStrategy

Defined in: types.ts:216

The pose strategy. Default fan().

---

maxVisible?

optional maxVisible?: number

Defined in: types.ts:194

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

---

reducedMotion?

optional reducedMotion?: ReducedMotionMode

Defined in: types.ts:214

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

---

rotation?

optional rotation?: false | RotationOptions

Defined in: types.ts:210

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

---

spring?

optional spring?: SpringPreset | SpringConfig

Defined in: types.ts:208

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

---

startIndex?

optional startIndex?: number

Defined in: types.ts:204

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

---

threshold?

optional threshold?: number

Defined in: types.ts:200

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