Merge pull request #962 from Andarist/fix/framer-motion-example-with-should-forward-prop

Fixed `shouldForwardProp` example in the Framer Motion integration doc

Author: nikolovlazar

configs/sandpack-contents/framer-motion-examples/chakra-factory.js

@@ -1,15 +1,14 @@
 module.exports = {
-  App: `import { Container, chakra } from '@chakra-ui/react';
+  App: `import { Container, chakra, shouldForwardProp } from '@chakra-ui/react';
 import { motion, isValidMotionProp } from 'framer-motion';
-  
+
 const ChakraBox = chakra(motion.div, {
   /**
-   * Allow motion props and the children prop to be forwarded.
-   * All other chakra props not matching the motion props will still be forwarded.
+   * Allow motion props and non-Chakra props to be forwarded.
    */
-  shouldForwardProp: (prop) => isValidMotionProp(prop) || prop === 'children',
+  shouldForwardProp: (prop) => isValidMotionProp(prop) || shouldForwardProp(prop),
 });
-  
+
 export default function App() {
   return (
     <Container h="100vh" display="flex" alignItems="center" justifyContent="center">

content/getting-started/with-framer.mdx

@@ -43,9 +43,9 @@ import {
 />
 
 > `shouldForwardProp` is needed to allow framer props to be used instead of the
-> matching props from Chakra. If you do not include "children", then you will
-> not be able to use child components. Either way, all other Chakra props can
-> still be used.
+> matching props from Chakra. If you do not include "children" somehow
+> (for example by using our `shouldForwardProp`), then you will not be able
+> to use child components. Either way, all other Chakra props can still be used.
 
 ### as prop