UNPKG

1.86 kBTypeScriptView Raw
1import { Component, ReactElement } from "react";
2
3export enum modes {
4 out = "out-in",
5 in = "in-out",
6}
7
8export interface SwitchTransitionProps {
9 /**
10 * Transition modes.
11 * `out-in`: Current element transitions out first, then when complete, the new element transitions in.
12 * `in-out`: New element transitions in first, then when complete, the current element transitions out.
13 */
14 mode?: "out-in" | "in-out" | undefined;
15
16 /**
17 * Any `Transition` or `CSSTransition` component
18 */
19 children: ReactElement;
20}
21
22/**
23 * A transition component inspired by the [vue transition modes](https://vuejs.org/v2/guide/transitions.html#Transition-Modes).
24 * You can use it when you want to control the render between state transitions.
25 * Based on the selected mode and the child's key which is the `Transition` or `CSSTransition` component, the `SwitchTransition` makes a consistent transition between them.
26 *
27 * If the `out-in` mode is selected, the `SwitchTransition` waits until the old child leaves and then inserts a new child.
28 * If the `in-out` mode is selected, the `SwitchTransition` inserts a new child first, waits for the new child to enter and then removes the old child
29 *
30 * ```jsx
31 * function App() {
32 * const [state, setState] = useState(false);
33 * return (
34 * <SwitchTransition>
35 * <FadeTransition key={state ? "Goodbye, world!" : "Hello, world!"}
36 * addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
37 * classNames='fade' >
38 * <button onClick={() => setState(state => !state)}>
39 * {state ? "Goodbye, world!" : "Hello, world!"}
40 * </button>
41 * </FadeTransition>
42 * </SwitchTransition>
43 * )
44 * }
45 * ```
46 */
47declare class SwitchTransition extends Component<SwitchTransitionProps> {}
48
49export default SwitchTransition;