How to use ReactTransitionGroup callbacks in functional components

Question

Im looking at examples about how to use TransitionGroup addon, but all the examples I can find are with class components and quite old articles. For example, how would you refactor this class component to an ES6 functional component and using the correct ReactTransitionGroup hooks to achieve the same?

class Box extends React.Component {
  componentWillEnter (callback) {
    const el = this.container;
    TweenMax.fromTo(el, 0.3, {y: 100, opacity: 0}, {y: 0, opacity: 1, onComplete: callback});
  }

  componentWillLeave (callback) {
    const el = this.container;
    TweenMax.fromTo(el, 0.3, {y: 0, opacity: 1}, {y: -100, opacity: 0, onComplete: callback});
  }

  render () {
    return <div className="box" ref={c => this.container = c}/>;
  }
}

How to call componentWillEnter and componentWillLeave hooks in a functional component?

See here : https://stackoverflow.com/questions/31374033/what-are-the-callbacks-in-reacttransitiongroup-hooks — Babak Yaghoobi, Mar 30 '21 at 05:34
@BabakYaghoobi well the link you provided doesn't answer my question at all. Im not asking for the available hooks in ReactTransitionGroup, Im asking how to use it with ES6 functional components — svelandiag, Mar 30 '21 at 15:26
I don't think the low-level-api you are referring to is the recommended way of doing it nowadays. Have you looked into [react-gsap](https://www.npmjs.com/package/react-gsap)? As far as I understand that's an open source wrapper for your `TweenMax` thingy. — Martin, Mar 30 '21 at 15:28
@Martin Well I just want to know how's the correct way of doing it using ES6 funcitonal components. TweenMax is debrecated by the way. — svelandiag, Mar 30 '21 at 16:07

score 0 · Answer 1 · answered Mar 31 '21 at 21:19

Well I finally found how to use ReactTransitionGroup with ES6 functional components, here's an example:

      <Transition
        timeout={1000}
        mountOnEnter
        unmountOnExit
        in={isActiveRow} //Here we specify condition when to show component
        addEndListener={(node, done) => {
          gsap.to(node, {
            duration: 0.5,
            height: isActiveRow ? "130px" : 0,
            autoAlpha: isActiveRow ? 1 : 0,
            onComplete: done,
          });
        }}
        onEntering={(node) => {
          gsap.fromTo(
            node,
            {
              duration: 1,
              height: 0,
              autoAlpha: isActiveRow ? 0 : 1,
            },
            { height: "130px" }
          );
        }}
      >
        /*The component you want to show*/
        <YourComponent />
      </Transition>

To learn more about the different available hooks check here

How to use ReactTransitionGroup callbacks in functional components

1 Answers1