All files / src/components/MotionConfig index.tsx

100% Statements 16/16
100% Branches 2/2
100% Functions 3/3
100% Lines 15/15

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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 6532x 32x 32x 32x       32x                                               32x 194x 193x 193x   193x         193x           193x           193x 167x       193x            
import * as React from "react"
import { useContext, useMemo } from "react"
import { MotionConfigContext } from "../../context/MotionConfigContext"
import {
    loadExternalIsValidProp,
    IsValidProp,
} from "../../render/dom/utils/filter-props"
import { useConstant } from "../../utils/use-constant"
 
export interface MotionConfigProps extends Partial<MotionConfigContext> {
    children?: React.ReactNode
    isValidProp?: IsValidProp
}
 
/**
 * `MotionConfig` is used to set configuration options for all children `motion` components.
 *
 * ```jsx
 * import { motion, MotionConfig } from "framer-motion"
 *
 * export function App() {
 *   return (
 *     <MotionConfig transition={{ type: "spring" }}>
 *       <motion.div animate={{ x: 100 }} />
 *     </MotionConfig>
 *   )
 * }
 * ```
 *
 * @public
 */
export function MotionConfig({
    children,
    isValidProp,
    ...config
}: MotionConfigProps) {
    isValidProp && loadExternalIsValidProp(isValidProp)
 
    /**
     * Inherit props from any parent MotionConfig components
     */
    config = { ...useContext(MotionConfigContext), ...config }
 
    /**
     * Don't allow isStatic to change between renders as it affects how many hooks
     * motion components fire.
     */
    config.isStatic = useConstant(() => config.isStatic)
 
    /**
     * Creating a new config context object will re-render every `motion` component
     * every time it renders. So we only want to create a new one sparingly.
     */
    const context = useMemo(
        () => config,
        [JSON.stringify(config.transition), config.transformPagePoint]
    )
 
    return (
        <MotionConfigContext.Provider value={context as MotionConfigContext}>
            {children}
        </MotionConfigContext.Provider>
    )
}