framer-motion/dist/es/render/dom/use-render.mjs

A simple and powerful JavaScript animation library

import { isMotionValue } from 'motion-dom';
import { Fragment, useMemo, createElement } from 'react';
import { useHTMLProps } from '../html/use-props.mjs';
import { useSVGProps } from '../svg/use-props.mjs';
import { filterProps } from './utils/filter-props.mjs';
import { isSVGComponent } from './utils/is-svg-component.mjs';

function useRender(Component, props, ref, { latestValues, }, isStatic, forwardMotionProps = false) {
    const useVisualProps = isSVGComponent(Component)
        ? useSVGProps
        : useHTMLProps;
    const visualProps = useVisualProps(props, latestValues, isStatic, Component);
    const filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps);
    const elementProps = Component !== Fragment ? { ...filteredProps, ...visualProps, ref } : {};
    /**
     * If component has been handed a motion value as its child,
     * memoise its initial value and render that. Subsequent updates
     * will be handled by the onChange handler
     */
    const { children } = props;
    const renderedChildren = useMemo(() => (isMotionValue(children) ? children.get() : children), [children]);
    return createElement(Component, {
        ...elementProps,
        children: renderedChildren,
    });
}

export { useRender };