Merge pull request #1410 from framer/feature/inject-is-valid-prop

Adding isValidProp to MotionConfig

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 
+## [5.6.0] 2022-01-12
+
+### Added
+
+-   `isValidProp` prop to `MotionConfig` that allows the injection of custom detection of valid React props.
+
 ## [5.5.8] 2022-01-12
 
 ### Fixed

src/components/MotionConfig/__tests__/index.test.tsx

@@ -0,0 +1,21 @@
+import { render } from "../../../../jest.setup"
+import { motion } from "../../../render/dom/motion"
+import { MotionConfig } from "../"
+import * as React from "react"
+
+describe("custom properties", () => {
+    test("renders", () => {
+        const Component = () => {
+            return (
+                <MotionConfig isValidProp={(key) => key !== "data-foo"}>
+                    <motion.div data-foo="bar" data-bar="foo" />
+                </MotionConfig>
+            )
+        }
+
+        const { container } = render(<Component />)
+
+        expect(container.firstChild).not.toHaveAttribute("data-foo")
+        expect(container.firstChild).toHaveAttribute("data-bar")
+    })
+})

src/components/MotionConfig/index.tsx

@@ -1,10 +1,15 @@
 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
 }
 
 /**
@@ -24,7 +29,13 @@ export interface MotionConfigProps extends Partial<MotionConfigContext> {
  *
  * @public
  */
-export function MotionConfig({ children, ...config }: MotionConfigProps) {
+export function MotionConfig({
+    children,
+    isValidProp,
+    ...config
+}: MotionConfigProps) {
+    isValidProp && loadExternalIsValidProp(isValidProp)
+
     /**
      * Inherit props from any parent MotionConfig components
      */

src/projection/node/create-projection-node.ts

@@ -680,6 +680,7 @@ export function createProjectionNode<I>({
                 measured,
                 actual: this.removeElementScroll(measured),
             }
+
             this.layoutCorrected = createBox()
             this.isLayoutDirty = false
             this.projectionDelta = undefined

src/render/dom/utils/filter-props.ts

@@ -3,6 +3,16 @@ import { isValidMotionProp } from "../../../motion/utils/valid-prop"
 
 let shouldForward = (key: string) => !isValidMotionProp(key)
 
+export type IsValidProp = (key: string) => boolean
+
+export function loadExternalIsValidProp(isValidProp?: IsValidProp) {
+    if (!isValidProp) return
+
+    // Explicitly filter our events
+    shouldForward = (key: string) =>
+        key.startsWith("on") ? !isValidMotionProp(key) : isValidProp(key)
+}
+
 /**
  * Emotion and Styled Components both allow users to pass through arbitrary props to their components
  * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which
@@ -17,16 +27,12 @@ let shouldForward = (key: string) => !isValidMotionProp(key)
  * actually required.
  */
 try {
-    const emotionIsPropValid = require("@emotion/is-prop-valid").default
-
-    shouldForward = (key: string) => {
-        // Handle events explicitly as Emotion validates them all as true
-        if (key.startsWith("on")) {
-            return !isValidMotionProp(key)
-        } else {
-            return emotionIsPropValid(key)
-        }
-    }
+    /**
+     * We attempt to import this package but require won't be defined in esm environments, in that case
+     * isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this should probably be removed
+     * in favour of explicit injection.
+     */
+    loadExternalIsValidProp(require("@emotion/is-prop-valid").default)
 } catch {
     // We don't need to actually do anything here - the fallback is the existing `isPropValid`.
 }