index.mjs 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. "use client";
  2. import { jsx } from 'react/jsx-runtime';
  3. import { useContext, useMemo } from 'react';
  4. import { MotionConfigContext } from '../../context/MotionConfigContext.mjs';
  5. import { loadExternalIsValidProp } from '../../render/dom/utils/filter-props.mjs';
  6. import { useConstant } from '../../utils/use-constant.mjs';
  7. /**
  8. * `MotionConfig` is used to set configuration options for all children `motion` components.
  9. *
  10. * ```jsx
  11. * import { motion, MotionConfig } from "framer-motion"
  12. *
  13. * export function App() {
  14. * return (
  15. * <MotionConfig transition={{ type: "spring" }}>
  16. * <motion.div animate={{ x: 100 }} />
  17. * </MotionConfig>
  18. * )
  19. * }
  20. * ```
  21. *
  22. * @public
  23. */
  24. function MotionConfig({ children, isValidProp, ...config }) {
  25. isValidProp && loadExternalIsValidProp(isValidProp);
  26. /**
  27. * Inherit props from any parent MotionConfig components
  28. */
  29. config = { ...useContext(MotionConfigContext), ...config };
  30. /**
  31. * Don't allow isStatic to change between renders as it affects how many hooks
  32. * motion components fire.
  33. */
  34. config.isStatic = useConstant(() => config.isStatic);
  35. /**
  36. * Creating a new config context object will re-render every `motion` component
  37. * every time it renders. So we only want to create a new one sparingly.
  38. */
  39. const context = useMemo(() => config, [
  40. JSON.stringify(config.transition),
  41. config.transformPagePoint,
  42. config.reducedMotion,
  43. ]);
  44. return (jsx(MotionConfigContext.Provider, { value: context, children: children }));
  45. }
  46. export { MotionConfig };