reactjs / react-transition-group

An easy way to perform animations when a React component enters or leaves the DOM
https://reactcommunity.org/react-transition-group/
Other
10.18k stars 649 forks source link

How to inherit CSSTransitionProps in custom component #661

Open CheryloO opened 4 years ago

CheryloO commented 4 years ago

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 = (props) => { const { children, classNames, animation, ...restProps } = props return ( <CSSTransition classNames = { classNames ? classNames : animation } {...restProps}

) }

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

export default Transition

TJCollin commented 4 years ago

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