React-transition-group: support for nodeRef with <TransitionGroup /> (or any dynamic list of <CSSTransition />s)

[endoooo]

I am trying to fix the "Warning: findDOMNode is deprecated in StrictMode." using nodeRef, but it works for single <Transition />/<CSSTransition /> components only. It would be great to be able to fix this warning without the need of managing multiple refs instances on the developer/user side.

we could use nodeRef as a <TransitionGroup /> prop, passing a single ref, and the lib could do the heavy lifting for us! 😀

I don't know if this is possible or even makes sense from the project perspective, but if it does, I would be glad to contribute with a PR.

---

here is my use case (simplified):

function Toast() {
  const { messages, removeToast } = useToast();

  return createPortal(
    (
      <Container>
        <TransitionGroup
          appear
          component={null}
        >
          {messages.map(
            ({ id, theme, text }) => (
              <CSSTransition
                key={id}
                classNames='toast-anim'
                timeout={animDuration}
                in
              >
                <Box>
                  <ToastIcon
                    name={getIconNameFromTheme(theme)}
                    size='24px'
                    theme={theme}
                  />
                  <Text>{text}</Text>
                  <CloseButton
                    type='button'
                    onClick={() => removeToast(id)}
                  >
                    <Icon
                      name='close'
                      size='24px'
                    />
                  </CloseButton>
                </Box>
              </CSSTransition>
            )
          )}
        </TransitionGroup>
      </Container>
    ),
    document.body,
  );
}

[ryansheehan]

Ran into this issue and I followed another issue that uses nodeRef, as explained in the 4.4.0 release. Seems to have cleared everything up.

[endoooo]

@ryansheehan the release note that you're referencing is the same that I've linked in my initial comment. I know that we can use nodeRef to supress findDOMNode console warnings. the problem is that managing those refs can be cumbersome when you have a dynamic list of <CSSTransition />s (and something that maybe the lib could do for us).

[leoneckert]

same issue here, would love a solution for this problem in 🙏

[ljc-dev]

@Mavludin (from #687) solution with using createRef to create refs for dynamic lists worked for me tho I'm not sure if it's the best approach. I hope the team would soon update the transition group Todo-list tutorial with nodeRef. That would help so many people - judging from the number of duplicate issues on this topic this is getting 😉.

[ljc-dev]

I've forked the tutorial todo-list and added nodeRef with createRef:
https://codesandbox.io/s/thirsty-rgb-dbgxl

[CodySchaaf]

I'm not sure this would work though when transitioning by using the key prop (since you wouldn't have anywhere to call createRef) like what is described here:

http://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef

When changing key prop of Transition in a TransitionGroup a new nodeRef need to be provided to Transition with changed key prop (see test/CSSTransition-test.js).

and

http://reactcommunity.org/react-transition-group/transition-group#TransitionGroup-prop-children

While this component is meant for multiple Transition or CSSTransition children, sometimes you may want to have a single transition child with content that you want to be transitioned out and in when you change it (e.g. routes, images etc.) In that case you can change the key prop of the transition child as you change its content, this will cause TransitionGroup to transition the child out and back in.

Like this:

export const RoutesTransitions = ({
  transitionKey,
  children,
  transition,
  forward,
}) => {
  const onEnter = (node) => {
    node.style.setProperty(
      "transform",
      `translateX(${forward ? "" : "-"}150%)`
    );
  };

  const onEntering = (node) => {
    node.style.setProperty("transform", "translateX(0)");
    node.style.setProperty("transition", transition);
  };

  const onExit = (node) => {
    node.style.setProperty("transform", "translateX(0)");
  };

  const onExiting = (node) => {
    node.style.setProperty(
      "transform",
      `translateX(${forward ? "-" : ""}150%)`
    );
    node.style.setProperty("transition", transition);
  };

  return (
    <TransitionGroup component={null}>
      <CSSTransition
        key={transitionKey}
        timeout={600}
        onEnter={onEnter}
        onEntering={onEntering}
        onExit={onExit}
        onExiting={onExiting}
      >
        <div style={{ position: "absolute", backgroundColor: 'lightblue', width: '100vw' }}>
            {children}
        </div>
      </CSSTransition>
    </TransitionGroup>
  );
};

[KAnder425]

@CodySchaaf Do you know if there has been any progress on this? I have the same situation as above (a TransitionGroup/CSSTransition with a changing key prop for multiple children) and I can't figure out how to get past the FindDOMNode warning.