CSS transition doesn't work with react-portal

Question

I am using react-portal to make a dialog and added transition, it went well as

// App.js
 return (
   <div className="App">
      <button onClick={() => setIsOpen(true)}>Click to see dialog</button>
      <PortalDialog isOpen={isOpen} setIsOpen={setIsOpen}>
        This is content of dialog
      </PortalDialog>
      {/* animation works */}
   </div>
  )

//PortalDialog.js
  return (
    <Portal>
      <DialogWrapper className={`${isOpen ? "active" : ""}`}>
        {children}
        <button onClick={() => setIsOpen(false)}>Close</button>
      </DialogWrapper>
    </Portal>
  );

until I noticed PortalDialog is created every time on render which I don't want so I added a condition

    <div className="App">
      <button onClick={() => setIsOpen(true)}>Click to see dialog</button>
      {isOpen && (
        <PortalDialog isOpen={isOpen} setIsOpen={setIsOpen}>
          This is content of dialog
        </PortalDialog> // animation doesn't work
      )}
    </div>

Now it's not rendered everytime but CSS transition doesn't work anymore and I think that's because of the condition I added. But I couldn't find a way to add transition with react-portal, what do I need to do here ? I made a codesandbox example here.

I think what you are looking for is ReactTransitionGroup. Check this out. reactcommunity.org/react-transition-group. — Nisanth Reddy
– Nisanth Reddy, Commented May 16, 2021 at 13:42

Kaung Khant Zaw · Accepted Answer · 2021-05-16 19:35:55Z

2

Looks like ReactTransitionGroup is the answer, I wrapped my PortalDialog component with CSSTransition component as shown in their codesandbox sample.

  <CSSTransition
      in={isOpen}
      timeout={300}
      classNames="dialog"
      unmountOnExit
    >
      <Portal>
        <DialogWrapper>
          {children}
          <button onClick={() => setIsOpen(false)}>Close</button>
        </DialogWrapper>
      </Portal>
   </CSSTransition>

Transition is now working without being created on every render.

answered May 16, 2021 at 19:35

Kaung Khant Zaw

1,6583 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS transition doesn't work with react-portal

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related