上手指南
Hooks 列表
后期规划
上手指南
Hooks 列表
后期规划
简体中文

useCircularList

Tags:
ProUtilities

一个帮助创建可以循环遍历列表的 React 钩子。

提示

如果您需要管理在两个稳定值之间切换的状态，考虑使用 useToggle 作为替代方案。

演示

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

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook🎨 Demo📄 Document

API

const [value, index, actions] = useCircularList<T>(initialList: T[], options 选项 Options \{#options})

选项 Options

export interface UseCycleListOptions<T, R extends T = T> {
  /**
   * 初始值
   */
  initialValue?: R
  /**
   * 当值未找到时的回退索引
   */
  fallbackIndex?: number
  /**
   * 自定义函数来获取值的索引
   *
   * @param {T} value - `T`，要查找的值
   * @param {T[]} list - `T[]`，要搜索的列表
   * @returns {number} `number`，值的索引
   */
  getIndexOf?: (value: T, list: T[]) => number
}

返回值

export type UseCycleListReturnsActions<T> = {
  /**
   * 移至下一个值
   *
   * @param {number} [step] - `number`，移动的步数
   * @returns {T} `T`，下一个值
   */
  next: (step?: number) => T
  /**
   * 移至上一个值
   *
   * @param {number} [step] - `number`，移动的步数
   * @returns {T} `T`，上一个值
   */
  prev: (step?: number) => T
  /**
   * 移至指定索引处的值
   *
   * @param {number} index - `number`，要移动的索引
   * @returns {T} `T`，指定索引处的值
   */
  go: (index: number) => T
}

export type UseCycleListReturns<T> = readonly [
  /**
   * 当前值
   */
  state: T,
  /**
   * 控制列表的操作
   */
  UseCycleListReturnsActions<T>,
  /**
   * 当前索引
   */
  index: number,
]