Skip to content
On this page

useCycleList

Category
Export Size
931 B
Last Changed
5 months ago

Cycle through a list of items.

Learn how to use useCycleList to create an image carousel with this FREE video lesson from Vue School!

Demo

Dog

Usage

ts
import { useCycleList } from '@vueuse/core'

const { state, next, prev } = useCycleList([
  'Dog',
  'Cat',
  'Lizard',
  'Shark',
  'Whale',
  'Dolphin',
  'Octopus',
  'Seal',
])

console.log(state.value) // 'Dog'

prev()

console.log(state.value) // 'Seal'
import { useCycleList } from '@vueuse/core'

const { state, next, prev } = useCycleList([
  'Dog',
  'Cat',
  'Lizard',
  'Shark',
  'Whale',
  'Dolphin',
  'Octopus',
  'Seal',
])

console.log(state.value) // 'Dog'

prev()

console.log(state.value) // 'Seal'

Type Declarations

typescript
export interface UseCycleListOptions<T> {
  /**
   * The initial value of the state.
   * A ref can be provided to reuse.
   */
  initialValue?: MaybeRef<T>
  /**
   * The default index when
   */
  fallbackIndex?: number
  /**
   * Custom function to get the index of the current value.
   */
  getIndexOf?: (value: T, list: T[]) => number
}
/**
 * Cycle through a list of items
 *
 * @see https://vueuse.org/useCycleList
 */
export declare function useCycleList<T>(
  list: T[],
  options?: UseCycleListOptions<T>
): UseCycleListReturn<T>
export interface UseCycleListReturn<T> {
  state: Ref<T>
  index: Ref<number>
  next: (n?: number) => T
  prev: (n?: number) => T
}
export interface UseCycleListOptions<T> {
  /**
   * The initial value of the state.
   * A ref can be provided to reuse.
   */
  initialValue?: MaybeRef<T>
  /**
   * The default index when
   */
  fallbackIndex?: number
  /**
   * Custom function to get the index of the current value.
   */
  getIndexOf?: (value: T, list: T[]) => number
}
/**
 * Cycle through a list of items
 *
 * @see https://vueuse.org/useCycleList
 */
export declare function useCycleList<T>(
  list: T[],
  options?: UseCycleListOptions<T>
): UseCycleListReturn<T>
export interface UseCycleListReturn<T> {
  state: Ref<T>
  index: Ref<number>
  next: (n?: number) => T
  prev: (n?: number) => T
}

Source

SourceDemoDocs

Contributors

Anthony Fu
Waleed Khaled
Jelf
markthree
lsdsjy

Changelog

v9.1.0 on 8/4/2022
fa2f6 - feat: support MaybeRef for initialValue (#2025)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
v7.7.0 on 2/26/2022
aef8a - fix: nullish check (#1280)
v7.5.5 on 1/25/2022
6d2cb - fix: operator precedence (#1176)
v7.4.0 on 12/18/2021
adceb - feat: new function (#1052)

Released under the MIT License.