What are the callbacks in ReactTransitionGroup hooks?

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.