@types/react-transition-group

  • Version 4.4.1
  • Published
  • 18.5 kB
  • 1 dependency
  • MIT license

Install

npm i @types/react-transition-group
yarn add @types/react-transition-group
pnpm add @types/react-transition-group

Overview

TypeScript definitions for react-transition-group

Index

Variables

variable config

const config: Config;

    Classes

    class CSSTransition

    class CSSTransition<Ref extends undefined | HTMLElement> extends Component<
    CSSTransitionProps<Ref>
    > {}

      class SwitchTransition

      class SwitchTransition extends Component<SwitchTransitionProps> {}
      • A transition component inspired by the [vue transition modes](https://vuejs.org/v2/guide/transitions.html#Transition-Modes). You can use it when you want to control the render between state transitions. 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.

        If the out-in mode is selected, the SwitchTransition waits until the old child leaves and then inserts a new child. 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

        function App() {
        const [state, setState] = useState(false);
        return (
        <SwitchTransition>
        <FadeTransition key={state ? "Goodbye, world!" : "Hello, world!"}
        addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
        classNames='fade' >
        <button onClick={() => setState(state => !state)}>
        {state ? "Goodbye, world!" : "Hello, world!"}
        </button>
        </FadeTransition>
        </SwitchTransition>
        )
        }

      class Transition

      class Transition<RefElement extends HTMLElement | undefined> extends Component<
      TransitionProps<RefElement>
      > {}
      • The Transition component lets you describe a transition from one component state to another _over time_ with a simple declarative API. Most commonly It's used to animate the mounting and unmounting of Component, but can also be used to describe in-place transition states as well.

        By default the Transition component does not alter the behavior of the component it renders, it only tracks "enter" and "exit" states for the components. It's up to you to give meaning and effect to those states. For example we can add styles to a component when it enters or exits:

        import Transition from 'react-transition-group/Transition';
        const duration = 300;
        const defaultStyle = {
        transition: `opacity ${duration}ms ease-in-out`,
        opacity: 0,
        }
        const transitionStyles = {
        entering: { opacity: 1 },
        entered: { opacity: 1 },
        };
        const Fade = ({ in: inProp }) => (
        <Transition in={inProp} timeout={duration}>
        {(state) => (
        <div style={{
        ...defaultStyle,
        ...transitionStyles[state]
        }}>
        I'm A fade Transition!
        </div>
        )}
        </Transition>
        );

      class TransitionGroup

      class TransitionGroup extends Component<TransitionGroupProps> {}
      • The <TransitionGroup> component manages a set of <Transition> components in a list. Like with the <Transition> component, <TransitionGroup>, 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 <TransitionGroup>. You can use _any_ <Transition> component in a <TransitionGroup>, not just css.

        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 (
        <div>
        <button onClick={() => this.handleAdd()}>Add Item</button>
        <TransitionGroup>
        {this.state.items.map((item, i) => (
        <FadeTransition key={item}>
        <div>
        {item}{' '}
        <button onClick={() => this.handleRemove(i)}>
        remove
        </button>
        </div>
        </FadeTransition>
        ))}
        </TransitionGroup>
        </div>
        );
        }
        }

        Note that <TransitionGroup> does not define any animation behavior! Exactly _how_ a list item animates is up to the individual <Transition> components. This means you can mix and match animations across different list items.

      Type Aliases

      type TransitionStatus

      type TransitionStatus =
      | typeof ENTERING
      | typeof ENTERED
      | typeof EXITING
      | typeof EXITED
      | typeof UNMOUNTED;

        Package Files (6)

        Dependencies (1)

        Dev Dependencies (0)

        No dev dependencies.

        Peer Dependencies (0)

        No peer dependencies.

        Badge

        To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

        You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@types/react-transition-group.

        • Markdown
          [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@types/react-transition-group)
        • HTML
          <a href="https://www.jsdocs.io/package/@types/react-transition-group"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>