next-transition

Transition from one Component to the next.

NPM installation

npm i --save @superherocheesecake/next-transition

Import the module

import Transition from '@superherocheesecake/next-transition';

Basic usage

Add any React Component as Child of the Transition Component. Fragment should be a String and is past to the lifecycle methods as transitionData; Instead of using something like <Component /> you can also use {this.props.children}. Make sure the key prop on the passed child matches the fragment prop on the transition component. The fragment string should be unique for the passed view.

render() {
    const { Component, pageProps, router } = this.props;
    return (
        <Transition fragment={router.pathname}>
            <Component key={router.pathname} {...pageProps} />
        </Transition>
    );
}

The following extra lifecycle Methods will be available on the Component. The transitionData is an object containing the current fragment and the previous fragment.

class MyComponent extends React.Component {
    /* 
     * immediateTransitionIn won't wait for the previous 
     * Component to trigger the callback in the transitionOut.
     */
    immediateTransitionIn(transitionData) {
        const { fragment, previousFragment } = transitionData;
        // ...
    }
    
    /*
     * transitionIn will wait for the previous Component to 
     * trigger the callback from the transitionOut. 
     */
    transitionIn(transitionData) {
        // ...
    }

    /* transitionOut needs to call the callback when this 
     * Component is done animating out. It will remove the 
     * current Component and trigger the transitionIn of 
     * the New Component.
     */
    transitionOut(callback, transitionData) {
        // ...
    }
}