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