useCycleList

v0.0.14testeddemo

Cycle through a list of items, with next/prev/shift/go controls. Supports a reactive list — the index is kept valid when the list changes.

Examples

const { state, next, prev } = useCycleList(['a', 'b', 'c']);
next(); // state.value === 'b'

const { index } = useCycleList(['a', 'b', 'c']);
index.value = 2; // jump directly to 'c'

Loading demo…

export function useCycleList<T>(
  list: MaybeRefOrGetter<T[]>,
  options: UseCycleListOptions<T> ={ ... }

T

Parameter	Type	Default	Description
`list`	`MaybeRefOrGetter<T[]>`	—	The list to cycle through (can be reactive)
`options`?	`UseCycleListOptions<T>`	`{}`	Options

UseCycleListReturn<T>State and controls

Property	Type	Default	Description
`state`	`ShallowRef<T>`	—	The currently selected item.
`index`	`WritableComputedRef<number>`	—	The index of the currently selected item. Writable — assigning jumps to that index.
`next`	`(n?: number) => T`	—	Move forward by `n` items (wraps around). Defaults to 1.
`prev`	`(n?: number) => T`	—	Move backward by `n` items (wraps around). Defaults to 1.
`shift`	`(delta?: number) => T`	—	Move by a signed `delta` relative to the current item (wraps around). Defaults to 1.
`go`	`(i: number) => T`	—	Jump to a specific index (wraps around out-of-range/negative indices).