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

4361 views

AuthorΒ΄s AnkiCodes image

AnkiCodes

❀️
1
Last edited on

2 Answers

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
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);