简体中文

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,
]

ON THIS PAGE

#useCircularList

#演示

#用法

#源码

#API

#选项 Options

#返回值

useCircularList

演示

用法

源码

API

选项 Options

返回值