'How to type framer-motion props with Higher Order Component?

im building a HOC with framer-motion but I have no idea how to type the props later because framer-motion does not export their types. Should I write them myself? Or how to create the HOC properly for the late usage?

function withOpacityTransition<T extends Record<string, unknown>>(Component: ComponentType<T>) {
  return (props: T) => (
    <Component {...props} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} />
  );
}

export default withOpacityTransition;
import withOpacityTransition from '../../hoc/withOpacityTransition';

const MainSettings = (props: TheTypeOfTheProps) => {
  return <motion.main ... className="flex-1">MainSettings</motion.main>;
};

export default withOpacityTransition(MainSettings);


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source