What are the callbacks in ReactTransitionGroup hoo

Question

React.js offers a low level API for animations called ReactTransitionGroup. In the docs it is stated that for the hooks componentWillAppear, componentWillEnter and componentWillLeave, a callback is passed as an argument.

My question is, what exactly is this callback and how it gets passed to those hooks, the docs aren't saying anything about those callbacks except that the animation is delayed until they get called.

Answer 1

First off, I am also still learning ReactJS so there is a possibility that I could be wrong in my approach and what not. Apologies in advance for that.

Open your Developer Tools' console window and analyse this jsFiddle example that I just made. Observe the sequence with which the callbacks get called.

I am using TweenMax to do some animations to a box to make it appear or disappear upon clicking of a button.

The Low-level API exposes quite a few useful callbacks for us to utilise. Shared example demonstrates the use of these callbacks.

JavaScript:

var ReactTransitionGroup = React.addons.TransitionGroup;
var MyBox = React.createClass({
    show: function(callback){
        var node = React.findDOMNode(this);
        TweenMax.fromTo(node, 2, { width: 100, height: 100, backgroundColor: '#0cc', scale: 0.2, opacity: 0, rotation: -180 }, { width: 100, height: 100, backgroundColor: '#0cc', scale: 1, opacity: 1, rotation: 0, ease: Expo.easeInOut, onComplete: callback, onCompleteScope: this });
    },
    hide: function(callback){
        var node = React.findDOMNode(this);
        TweenMax.to(node, 2, { width: 100, height: 100, backgroundColor: '#cc0', scale: 0.2, opacity: 0, ease: Expo.easeInOut, onComplete: callback, onCompleteScope: this });
    },
    componentWillAppear: function(didAppearCallback){
        console.log('MyBox.componentWillAppear');
        this.show(didAppearCallback);
    },
    componentDidAppear: function(){
        console.log('MyBox.componentDidAppear');
    },
    componentWillEnter: function(didEnterCallback){
        console.log('MyBox.componentWillEnter');
        this.show(didEnterCallback);
    },
    componentDidEnter: function(){
        console.log('MyBox.componentDidEnter');
    },
    componentWillLeave: function(didLeaveCallback){
        console.log('MyBox.componentWillLeave');
        this.hide(didLeaveCallback);
    },
    componentDidLeave: function(){
        console.log('MyBox.componentDidLeave');
    },
    componentDidMount: function() {
        console.log('MyBox.componentDidMount');
    },
    componentWillUnmount: function() {
        console.log('MyBox.componentWillUnmount');
    },
    render: function(){
        return <div>&nbsp;</div>;
    }
});
var Container = React.createClass({
    getInitialState: function(){
        return { isShowing: false };
    },
    onButtonClicked: function(){
        this.setState({ isShowing: !this.state.isShowing });
    },
    render: function(){
        var myBox = this.state.isShowing ? <MyBox key="myBox" /> : '';
        return (
            <div id="container">
                <MyButton onButtonClicked={this.onButtonClicked} />
                <ReactTransitionGroup transitionName="hellotransition">
                    {myBox}
                </ReactTransitionGroup>
            </div>
        );
    }
});
var MyButton = React.createClass({
    render: function(){
        return <button onClick={this.props.onButtonClicked}>Click Me</button>;
    }
});
//
React.render(<Container />, document.body);

Let me know if anything is unclear and I'll be happy to share what I know.

Answer 2

Without the callback, React would have no way of knowing how long to wait for your custom animation. Some clarification from one of the methods from the docs:

componentWillLeave(callback)

This is called when the child has been removed from the ReactTransitionGroup. Though the child has been removed, ReactTransitionGroup will keep it in the DOM until callback is called.

Imagine you want to fade out a component when it gets mounted, and you want to implement the fade-out code in pure JavaScript. When the component is unmounted, React calls componentWillLeave. You initiate the fade-out code (maybe using jQuery animations, or some tweening library), and when the fade-out is done, you call the callback to indicate that the animation is done, and then and only then will React unmount the component.