Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 31x 31x 108x 18x 18x 18x 7x 7x | import { useState, useRef } from "react" import { wrap } from "popmotion" type Cycle = (i?: number) => void 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" * * export const MyComponent = () => { * const [x, cycleX] = useCycle(0, 50, 100) * * return ( * <motion.div * animate={{ x: x }} * onTap={() => cycleX()} * /> * ) * } * ``` * * @param items - items to cycle through * @returns [currentState, cycleState] * * @public */ export function useCycle<T>(...items: T[]): CycleState<T> { const index = useRef(0) const [item, setItem] = useState(items[index.current]) return [ item, (next?: number) => { index.current = typeof next !== "number" ? wrap(0, items.length, index.current + 1) : next setItem(items[index.current]) }, ] } |