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
try this way:
replace
interface TransitionProps extends CSSTransitionProps {
animation?: AnimationName,
wrapper?: boolean
}
with
type TransitionProps = CSSTransitionProps & {
animation?: AnimationName,
wrapper?: boolean
}
Most helpful comment
try this way:
replace
interface TransitionProps extends CSSTransitionProps { animation?: AnimationName, wrapper?: boolean }with
type TransitionProps = CSSTransitionProps & { animation?: AnimationName, wrapper?: boolean }