React-transition-group: How to inherit CSSTransitionProps in custom component

Created on 26 Aug 2020  路  1Comment  路  Source: reactjs/react-transition-group

What is the current behavior?
version 4.3.0
typescript
I want inherit CSSTransitionProps from CSSTransition directory, there is an error information on 'CSSTransitionProps' when I use 'interface TransitionProps extends CSSTransitionProps ' :
'An interface can only extend an object type or intersection of object types with statically known members.'

What is the expected behavior?
I can use CSSTransitionProps in my components

Could you provide a CodeSandbox demo reproducing the bug?

import React from 'react';

import { CSSTransition } from 'react-transition-group';
import { CSSTransitionProps } from 'react-transition-group/CSSTransition';

type AnimationName = 'zoom-in-top' | 'zoom-in-left' | 'zoom-in-bottom' | 'zoom-in-right'

interface TransitionProps extends CSSTransitionProps {
  animation?: AnimationName,
  wrapper?: boolean
}

const Transition: React.FC<TransitionProps> = (props) => {
  const {
    children,
    classNames,
    animation,
    ...restProps
  } = props
  return (
    <CSSTransition
      classNames = { classNames ? classNames : animation }
      {...restProps}
    >
    </CSSTransition>
  )
}

Transition.defaultProps = {
  unmountOnExit: true,
  appear: true
}

export default Transition

Most helpful comment

try this way:
replace
interface TransitionProps extends CSSTransitionProps { animation?: AnimationName, wrapper?: boolean }
with
type TransitionProps = CSSTransitionProps & { animation?: AnimationName, wrapper?: boolean }

>All comments

try this way:
replace
interface TransitionProps extends CSSTransitionProps { animation?: AnimationName, wrapper?: boolean }
with
type TransitionProps = CSSTransitionProps & { animation?: AnimationName, wrapper?: boolean }

Was this page helpful?
0 / 5 - 0 ratings