useCycle (utils/use-cycle.ts)

motion · packages/framer-motion/src/utils/use-cycle.ts · typescript · MIT
ui

React hook that cycles through values, useful for toggling animations.

// Source: https://github.com/framer/motion | License: MIT | Copyright 2024 [Motion](https://motion.dev) B.V
// Provided via justclaw.it.com; keep this notice with the code.
"use client"

import { wrap } from "motion-utils"
import { useCallback, useRef, useState } from "react"

export type Cycle = (i?: number) => void

export type CycleState<T> = [T, Cycle]

/**
 * Cycles through a series of visual properties. Can be used to toggle between or cycle through animations. It works similar to `useState` in React. It is provided an initial array of possible states, and returns an array of two arguments.
 *
 * An index value can be passed to the returned `cycle` function to cycle to a specific index.
 *
 * ```jsx
 * import * as React from "react"
 * import { motion, useCycle } from "framer-motion

... (truncated -- full source via MCP)

See the full source, get the GitHub permalink, and search for more like it.

Get a free API key