framer-motion/dist/es/utils/use-cycle.mjs

A simple and powerful React animation library

import { __read, __spreadArray } from 'tslib';
import { wrap } from 'popmotion';
import { useRef, useState, useCallback } from 'react';

/**
 * 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
 */
function useCycle() {
    var items = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        items[_i] = arguments[_i];
    }
    var index = useRef(0);
    var _a = __read(useState(items[index.current]), 2), item = _a[0], setItem = _a[1];
    var runCycle = useCallback(function (next) {
        index.current =
            typeof next !== "number"
                ? wrap(0, items.length, index.current + 1)
                : next;
        setItem(items[index.current]);
    }, __spreadArray([items.length], __read(items), false));
    return [item, runCycle];
}

export { useCycle };