Guide
Reference
Roadmap
Guide
Reference
Roadmap

useCircularList

Tags:
ProUtilities

A React Hook that helps to create a circular list that can cycle through the list.

Tip

If you need to manage a state that toggle between two stable values, consider utilizing useToggle as an alternative.

Demo

Source
🍌 banner
🍎 apple
🍇 grape
🍉 watermelon
🍊 orange
Current:
[0] 🍌 banner

Usage

See API for more details.

Source

Click links below to view source on GitHub.

🪝 Hook🎨 Demo📄 Document

API

const [value, index, actions] = useCircularList<T>(initialList: T[], options)

Options

export interface UseCycleListOptions<T, R extends T = T> { /** * Initial value */ initialValue?: R /** * Fallback index when the value is not found */ fallbackIndex?: number /** * Custom function to get the index of the value * * @param {T} value - `T`, the value to find * @param {T[]} list - `T[]`, the list to search * @returns {number} `number`, the index of the value */ getIndexOf?: (value: T, list: T[]) => number }

Returns

export type UseCycleListReturnsActions<T> = { /** * Move to the next value * * @param {number} [step] - `number`, the step to move * @returns {T} `T`, the next value */ next: (step?: number) => T /** * Move to the previous value * * @param {number} [step] - `number`, the step to move * @returns {T} `T`, the previous value */ prev: (step?: number) => T /** * Move to the value at the specified index * * @param {number} index - `number`, the index to move * @returns {T} `T`, the value at the specified index */ go: (index: number) => T } export type UseCycleListReturns<T> = readonly [ /** * Current value */ state: T, /** * Actions to control the list */ UseCycleListReturnsActions<T>, /** * Current index */ index: number, ]