Skip to content

onnovisser/react-connected-transition

Repository files navigation

react-connected-transition

npm version Build Status codecov gzip size

A React component that passes along data between leaving and entering components in order to easily animate the transition between them.


Examples

Installation

# yarn
yarn add react-connected-transition

# npm
npm install -S react-connected-transition

Note: The code uses promises. If you need to support older browsers, be sure to include a polyfill.

CDN / External

<script src="https://unpkg.com/react-connected-transition/dist/react-connected-transition.umd.js"></script>

The module will be exposed as ReactConnectedTransition.

Usage

Import the ConnectedTransition component where you want to use it.

import ConnectedTransition from 'react-connected-transition';

Wrap the component you intend to animate.

<ConnectedTransition name="uniqueName1">
  <SomeComponent />
</ConnectedTransition>

When a ConnectedTransition unmounts and one with the same name mounts at the same time, the child of each will have its getTransitionData() called, followed by componentWillLeave() and componentWillEnter() respectively.

// Example transition animation using GSAP
class SomeComponent extends Component {
  getTransitionData() {
    return {
      bounds: this.node.getBoundingClientRect(),
    };
  }

  componentWillEnter(from, to) {
    TweenMax.from(this.node, 0.4, {
      x: from.bounds.left - to.bounds.left,
      y: from.bounds.top - to.bounds.top,
      ease: Power3.easeInOut,
      onComplete: () => TweenMax.set(this.node, { clearProps: 'all' }),
    });
  }

  componentWillLeave() {
    TweenMax.set(this.node, { opacity: 0 });
  }

  render() {
    return (
      <div ref={c => (this.node = c)}>
        {this.props.children}
      </div>
    );
  }
}

Api

Props

  • children

    PropTypes.element

    Component you intend to animate.

    The following hooks are called on them:

    The child components of ConnectedTransition's with the same name don't have to be of the same type

  • name

    PropTypes.string

    A unique name to find the related transitioning component.

  • getTransitionData

    PropTypes.func

    () => Data object

    Callback function similar to the getTransitionData() hook.

  • onEnter

    PropTypes.func

    (from, to) => void

    Callback function similar to componentWillEnter().

  • onLeave

    PropTypes.func

    (from, to) => void

    Callback function similar to componentWillLeave().

  • exit

    PropTypes.bool

    By default, the ConnectedTransition component waits for its child to unmount before sending its data to the mounting component with the same name. When using react-transition-group, a component will stay mounted for the duration of the transition before unmounting. To tell the ConnectedTransition to expect a transtion, pass exit={true} when exiting.

  • passive

    PropTypes.bool

    A passive ConnectedTransition won't have its getTransitionData() hook called. componentWillEnter() or componentWillLeave() will be called when this component enters or leaves at the same time as another ConnectedTransition with the same name.


Reference

getTransitionData()

() => Data object

This is called right before componentWillLeave() and componentWillEnter(). Return data here to pass to those methods. Data returned here will be merged with the data returned from the getTransitionData callback prop. When keys confict, the ones return from the callback prop take precedence.


componentWillEnter()

(from, to) => void

This is called on components whose ConnectedTransition parent has mounted and has its exit-prop not set to true. It is only called when, at the same time, a ConnectedTransition with the same name unmounts or has its exit-prop set to true.

from and to are the data returned from the getTranstionData() hook, called on the leaving and entering component respectively.


componentWillLeave()

(from, to) => void

This is called on components whose ConnectedTransition parent has its exit-prop set to true. It is only called when, at the same time, a ConnectedTransition with the same name has mounted or has its exit-prop set to false. It is not called when unmounting, as a ConnectedTransition waits for another to enter before it handles the transition, at which point the exiting component may already have unmounted.

About

A React component to help with shared element transitions

Resources

License

Stars

Watchers

Forks

Packages

No packages published