ReactTransitionGroup

The ReactTransitionGroup library is exposed through useLibraries(). It contains all the core components from react-transition-group, such as Transition, CSSTransition, TransitionGroup, and SwitchTransition.

---

Importing

const { ReactTransitionGroup } = useLibraries();
const { Transition, CSSTransition, TransitionGroup, SwitchTransition } = ReactTransitionGroup;

---

Key Components

• Transition Gives you full control over mounting/unmounting states (entering, entered, exiting, exited). Docs →

• CSSTransition Automatically adds/removes CSS classes (-enter, -enter-active, -exit, -exit-active) during the transition lifecycle. Docs →

• TransitionGroup Manages a list of transitioning items, handling enter/exit animations as elements are added or removed. Docs →

• SwitchTransition Animates when one child component replaces another. Docs →

---

Example: Fade with CSSTransition

module.exports = ({ useState, useLibraries }) => {

  const { ReactTransitionGroup } = useLibraries();
  const { CSSTransition } = ReactTransitionGroup;
  const [show, setShow] = useState(false);

  return (
    <div>
      <button onClick={() => setShow(!show)}>Toggle</button>
      <CSSTransition in={show} timeout={300} classNames="fade" unmountOnExit>
        <div className="fade">Hello with Fade</div>
      </CSSTransition>
    </div>
  );
};

.fade-enter { opacity: 0; }
.fade-enter-active { opacity: 1; transition: opacity 300ms; }
.fade-exit { opacity: 1; }
.fade-exit-active { opacity: 0; transition: opacity 300ms; }

---

Example: Animated List with TransitionGroup

module.exports = ({ useState, useLibraries }) => {

  const { ReactTransitionGroup } = useLibraries();
  const { TransitionGroup, CSSTransition } = ReactTransitionGroup;
  const [items, setItems] = useState(["First", "Second"]);

  return (
    <div>
      <button onClick={() => setItems([...items, "New Item"])}>Add Item</button>
      <TransitionGroup>
        {items.map((item, i) => (
          <CSSTransition key={i} timeout={300} classNames="item">
            <div>{item}</div>
          </CSSTransition>
        ))}
      </TransitionGroup>
    </div>
  );
};

---

References

• Official docs: reactcommunity.org/react-transition-group

• NPM: npmjs.com/package/react-transition-group

• Guide: LogRocket tutorial