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

A simple and powerful JavaScript animation library

{"version":3,"file":"use-cycle.mjs","sources":["../../../src/utils/use-cycle.ts"],"sourcesContent":["\"use client\"\n\nimport { wrap } from \"motion-utils\"\nimport { useCallback, useRef, useState } from \"react\"\n\nexport type Cycle = (i?: number) => void\n\nexport type CycleState<T> = [T, Cycle]\n\n/**\n * 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.\n *\n * An index value can be passed to the returned `cycle` function to cycle to a specific index.\n *\n * ```jsx\n * import * as React from \"react\"\n * import { motion, useCycle } from \"framer-motion\"\n *\n * export const MyComponent = () => {\n *   const [x, cycleX] = useCycle(0, 50, 100)\n *\n *   return (\n *     <motion.div\n *       animate={{ x: x }}\n *       onTap={() => cycleX()}\n *      />\n *    )\n * }\n * ```\n *\n * @param items - items to cycle through\n * @returns [currentState, cycleState]\n *\n * @public\n */\nexport function useCycle<T>(...items: T[]): CycleState<T> {\n    const index = useRef(0)\n    const [item, setItem] = useState(items[index.current])\n\n    const runCycle = useCallback(\n        (next?: number) => {\n            index.current =\n                typeof next !== \"number\"\n                    ? wrap(0, items.length, index.current + 1)\n                    : next\n\n            setItem(items[index.current])\n        },\n        // The array will change on each call, but by putting items.length at\n        // the front of this array, we guarantee the dependency comparison will match up\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [items.length, ...items]\n    )\n    return [item, runCycle]\n}\n"],"names":[],"mappings":";;;;AASA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;AACa;AACZ;AACA;AAEA;AAEQ;;AAEQ;;;;;;;;AAUhB;AACJ;;"}