Feature Request - remove dependency for react-dom in Transition

[stefanvonderkrone]

Feature Request - remove dependency for react-dom in Transition

Recently, I used react-transition-group to manage route-transitions in a React-/React-Native App and stumbled upon a bug in my project, where the react-native runtime would tell me, that there are more than one react-driver running. After brief investigations, I found out, that I used Transition, which directly imports react-dom. My solution was to copy the implementation of Transition and refactor the code, so that it gives you a ref, not a DOM-Node.

Example code below:

class Transition extends Component {
  // ...
  
  updateStatus(mounting = false) {
    let nextStatus = this.nextStatus;

    if (nextStatus !== null) {
      this.nextStatus = null;
      // nextStatus will always be ENTERING or EXITING.
      this.cancelNextCallback();
      const node = this.child;

      if (nextStatus === ENTERING) {
        this.performEnter(node, mounting);
      } else {
        this.performExit(node);
      }
    } else if (this.props.unmountOnExit && this.state.status === EXITED) {
      this.setState({
        status: UNMOUNTED
      });
    }
  }

  render() {
    // ...

    if (typeof children === 'function') {
      return React.cloneElement(children(status, childProps), {
        ...childProps,
        ref: child => (this.child = child),
      });
    }

    const child = React.Children.only(children);
    return React.cloneElement(child, {
      ...childProps,
      ref: child => (this.child = child),
    });
  }
}

My implementation has no claim to be the perfect solution, so bear with me.

What I am trying to say is, that I propose to remove the dependency to react-dom in favour of a more generic implementation. So if I would wish to work with the DOM-Node directly, I should use ReactDOM.findDOMNode myself as the user of react-transition-group.

What do you think?

Thank you :)

[kjkta]

I have a similar requirement. I think we will have to use React.forwardRef to forward the ref correctly to its' children.

[kjkta]

Here's a potential solution #437

Open to feedback

[jquense]

🎉 This issue has been resolved in version 4.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀