react-connected-transition

    1.1.4 • Public • Published

    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.

    Install

    npm i react-connected-transition

    DownloadsWeekly Downloads

    25

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    28 kB

    Total Files

    13

    Last publish

    Collaborators

    • onno