Ask Question

How to get the props type of Chakra UI Box with Framer motion in typescript?

I found this page how to use Chakra UI + Framer-motion here

import {  Box } from "@chakra-ui/core";
import { motion } from "framer-motion";

const MotionBox = motion.custom(Box);

function Example(){
  return (
       <MotionBox
          size="40px"
          ...
        />
  )
}

Which works fine but I need to get the Props Interface of MotionBox e.g. in order to do this

interface Props extends MotionBoxProps {
  ...
}
const MotionBoxExtended = (props: Props) => {
  return ...
}
TypeScriptchakraframer-motion

79 views

Authorยดs Anki Batsukh image

Anki Batsukh

โค๏ธ
1
Last edited on

1 Answer available

Best answer

You may obtain the type for the props of any component with ComponentProps from the @types/react package.

import { Box } from "@chakra-ui/core";
import { motion } from "framer-motion";
import { ComponentProps } from 'react';

const MotionBox = motion.custom(Box);

interface Props extends ComponentProps<typeof MotionBox> {

}
๐Ÿ‘
1
๐Ÿš€
2
โค๏ธ
2
Last edited on