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 ...
}

TypeScript chakra framer-motion

4328 views

AnkiCodes

❤️

Last edited on Sept. 19 2020 at 22:19

2 Answers

Answer this question

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> {

}

Kilian Cirera Sant

👍

🚀

❤️

Last edited on Sept. 27 2020 at 03:59

Update: 2021.04.21:

There is an official page from chakra, how you can achieve this.

Short answer

import { FC } from 'react';
import { chakra, HTMLChakraProps } from '@chakra-ui/react';
import { HTMLMotionProps, motion } from 'framer-motion';

type Merge<P, T> = Omit<P, keyof T> & T;
export type MotionBoxProps = Merge<HTMLChakraProps<'div'>, HTMLMotionProps<'div'>>;
export const MotionBox: FC<MotionBoxProps> = motion(chakra.div);

AnkiCodes

Last edited on Apr. 21 2021 at 06:58

Your answer