question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] Prevent props from passing through to DOM elements

See original GitHub issue

It seems the issue detailed in Issue 272 has re-occurred when using the latest version 5.5.5 in combination with styled components. I have tried earlier versions but same error is thrown: React does not recognize the customProp prop on a DOM element.

It seems all props are passed down by motion to the DOM element. They should be stripped out to prevent this error. I have seen that an earlier fix was to utilise @emotion/is-prop-valid as an optional dependency. Perhaps this dependency is not correctly being used in cases when it should?

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug https://github.com/mattbrannon/motion-console-warning Unfortunately unable to reproduce via sandbox, but @mattbrannon made this public repo specifically to demonstrate the issue.

4. Steps to reproduce customProp is passed on to the DOM element when using Styled Components

const Custom = styled(motion.div)`
  opacity: ${({ customProp }) => customProp};
`

...
return (
  <Custom customProp={1}></CustomProp>
)

5. Expected behavior

For custom props to filtered out and not passed on to the DOM element created by motion.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6

github_iconTop GitHub Comments

5reactions
mattgperrycommented, Jan 12, 2022

I’ve just published 5.6.0 which will let you pass a custom function via MotionConfig:

import { MotionConfig } from "framer-motion"
import isValidProp from "@emotion/is-prop-valid"

function App() {
  return (
    <MotionConfig isValidProp={isValidProp}>

   </MotionConfig>
  )
}
1reaction
nataliarossinicommented, Jan 10, 2022

I had the same issue and fixed by only adding a $ to my props like so $customProp Apparently this release solves the issue with props filtering https://github.com/styled-components/styled-components/releases/tag/v5.1.0

Read more comments on GitHub >

github_iconTop Results From Across the Web

Preventing Props From Being Passed to the DOM with styled ...
A quick primer on new functionality in styled-components v5.1.0. Tagged with styledcomponents, javascript.
Read more >
How to prevent a prop from being passed to the extended ...
First approach works correctly but throws warning: React does not recognize the isActive prop on a DOM element; Second and Third throws TS...
Read more >
Unknown Prop Warning - React
The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as...
Read more >
How passing props to component works in React
As you develop your React application, sometimes you might need a prop to be structured and defined to avoid bugs and errors. In...
Read more >
typescript react component type as prop - Industry Today
The ref is set when the element is declared using the ref prop: If a ... an error and divRef.current will then be...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found