import { Component, ElementType, ReactElement } from "react"; import { TransitionActions, TransitionProps } from "./Transition"; export interface IntrinsicTransitionGroupProps extends TransitionActions { component?: T | null | undefined; } export interface ComponentTransitionGroupProps extends TransitionActions { component: T; } export type TransitionGroupProps = | (IntrinsicTransitionGroupProps & JSX.IntrinsicElements[T]) | (ComponentTransitionGroupProps) & { children?: ReactElement> | Array>> | undefined; childFactory?(child: ReactElement): ReactElement; [prop: string]: any; }; /** * The `` component manages a set of `` components * in a list. Like with the `` component, ``, is a * state machine for managing the mounting and unmounting of components over * time. * * Consider the example below using the `Fade` CSS transition from before. * As items are removed or added to the TodoList the `in` prop is toggled * automatically by the ``. You can use _any_ `` * component in a ``, not just css. * * ```jsx * import TransitionGroup from 'react-transition-group/TransitionGroup'; * * class TodoList extends React.Component { * constructor(props) { * super(props) * this.state = {items: ['hello', 'world', 'click', 'me']} * } * handleAdd() { * const newItems = this.state.items.concat([ * prompt('Enter some text') * ]); * this.setState({ items: newItems }); * } * handleRemove(i) { * let newItems = this.state.items.slice(); * newItems.splice(i, 1); * this.setState({items: newItems}); * } * render() { * return ( *
* * * {this.state.items.map((item, i) => ( * *
* {item}{' '} * *
*
* ))} *
*
* ); * } * } * ``` * * Note that `` does not define any animation behavior! * Exactly _how_ a list item animates is up to the individual `` * components. This means you can mix and match animations across different * list items. */ declare class TransitionGroup extends Component {} export default TransitionGroup;