[Question] How can it be used with redux @connect?

[glivera]

Hi
I tried to use it on a project with redux and it didn't work.
Is it possible at all?

Thank you

[cheapsteak]

Just tried it out, looks like it can, although currently takes a bit of a code (would be much simpler if we had a render-prop/FaCC connect component, which looks like it may come in v6 of react-redux)

Here's a codesandbox demo of how to get this working now - https://codesandbox.io/s/6zyv1m10rw (files of interest - index.js (where the TransitionGroup is), containers/App.js (connected component with animation), hookupAnimationLifecycles.js (helper Hoc))

connect must have the option withRef: true

You'll want to add this helper HoC function:

hookupAnimationLifecycles.js:

import { createFactory, Component } from "react";

const animationHooks = [
  "componentWillAppear",
  "componentDidAppear",
  "componentWillEnter",
  "componentDidEnter",
  "componentWillLeave",
  "componentDidLeave"
];

export default BaseComponent => {
  const factory = createFactory(BaseComponent);

  class AnimationLifecycle extends Component {
    render() {
      return factory({
        ...{ ...this.props, ...{ ref: ref => (this.ref = ref) } },
        ...this.state
      });
    }
  }

  animationHooks.forEach(hook => {
    AnimationLifecycle.prototype[hook] = function(cb) {
      if (this.ref.getWrappedInstance()[hook]) {
        this.ref.getWrappedInstance()[hook](cb);
      } else {
        cb && cb();
      }
    };
  });

  return AnimationLifecycle;
};

And to use it -

class Component extends React.Component {
  componentWillAppear () {
    // your animation stuff here
  }
  render () {
     // your render function
  }
}

compose(
  hookupAnimationLifecycles, // <-- this HoC needs to be at the first/outer-most position
  connect(mapStateToProps, mapDispatchToProps, null, {
    withRef: true // <---withRef needs to be true
  })
)(Component);