This repository was archived by the owner on Jan 23, 2024. It is now read-only.
File tree Expand file tree Collapse file tree 2 files changed +8
-9
lines changed
configs/sandpack-contents/framer-motion-examples Expand file tree Collapse file tree 2 files changed +8
-9
lines changed Original file line number Diff line number Diff line change 11module . exports = {
2- App : `import { Container, chakra } from '@chakra-ui/react';
2+ App : `import { Container, chakra, shouldForwardProp } from '@chakra-ui/react';
33import { motion, isValidMotionProp } from 'framer-motion';
4-
4+
55const ChakraBox = chakra(motion.div, {
66 /**
7- * Allow motion props and the children prop to be forwarded.
8- * All other chakra props not matching the motion props will still be forwarded.
7+ * Allow motion props and non-Chakra props to be forwarded.
98 */
10- shouldForwardProp: (prop) => isValidMotionProp(prop) || prop === 'children' ,
9+ shouldForwardProp: (prop) => isValidMotionProp(prop) || shouldForwardProp( prop) ,
1110});
12-
11+
1312export default function App() {
1413 return (
1514 <Container h="100vh" display="flex" alignItems="center" justifyContent="center">
Original file line number Diff line number Diff line change @@ -43,9 +43,9 @@ import {
4343/>
4444
4545> ` shouldForwardProp ` is needed to allow framer props to be used instead of the
46- > matching props from Chakra. If you do not include "children", then you will
47- > not be able to use child components. Either way, all other Chakra props can
48- > still be used.
46+ > matching props from Chakra. If you do not include "children" somehow
47+ > (for example by using our ` shouldForwardProp ` ), then you will not be able
48+ > to use child components. Either way, all other Chakra props can still be used.
4949
5050### as prop
5151
You can’t perform that action at this time.
0 commit comments