Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSSTransition component (Typescript). This one allows you use TransitionGroup with Tailwind, animating in a list of items.
import React, { ReactNode } from "react";
import { CSSTransition as ReactTransition } from "react-transition-group";
interface TransitionProps {
in?: boolean;
timeout: number;
enter?: string;
enterFrom?: string;
enterTo?: string;
leave?: string;
leaveFrom?: string;
leaveTo?: string;
children: ReactNode;
}
function addClasses(classes: string[], ref: React.RefObject<HTMLDivElement>) {
ref.current?.classList.add(...classes);
}
function removeClasses(classes: string[], ref: React.RefObject<HTMLDivElement>) {
ref.current?.classList.remove(...classes);
}
export function CSSTransition(props: TransitionProps) {
const { enter, enterFrom, enterTo, leave, leaveFrom, leaveTo } = props;
const nodeRef = React.useRef<HTMLDivElement>(null);
const enterClasses = splitClasses(enter);
const enterFromClasses = splitClasses(enterFrom);
const enterToClasses = splitClasses(enterTo);
const leaveClasses = splitClasses(leave);
const leaveFromClasses = splitClasses(leaveFrom);
const leaveToClasses = splitClasses(leaveTo);
return (
<ReactTransition
in={props.in}
nodeRef={nodeRef}
timeout={props.timeout}
unmountOnExit
onEnter={() => {
addClasses([...enterClasses, ...enterFromClasses], nodeRef);
}}
onEntering={() => {
removeClasses(enterFromClasses, nodeRef);
addClasses(enterToClasses, nodeRef);
}}
onEntered={() => {
removeClasses([...enterToClasses, ...enterClasses], nodeRef);
}}
onExit={() => {
addClasses([...leaveClasses, ...leaveFromClasses], nodeRef);
}}
onExiting={() => {
removeClasses(leaveFromClasses, nodeRef);
addClasses(leaveToClasses, nodeRef);
}}
onExited={() => {
removeClasses([...leaveToClasses, ...leaveClasses], nodeRef);
}}
>
<div ref={nodeRef}>{props.children}</div>
</ReactTransition>
);
}
function splitClasses(string: string = ""): string[] {
return string.split(" ").filter((s) => s.length);
}
@stevecastaneda

This comment has been minimized.

Copy link
Owner Author

@stevecastaneda stevecastaneda commented Jun 13, 2020

Example usage:

<TransitionGroup as="ul">
        {items.map(item => (
          <CSSTransition
            key={item.id}
            timeout={500}
            enter="transform ease-out duration-500 transition"
            enterFrom="opacity-0 scale-50"
            enterTo="opacity-100 scale-100"
            leave="transform ease-out duration-500 transition"
            leaveFrom="opacity-100 scale-100"
            leaveTo="opacity-0 scale-50"
          >
            <li>
              {item.title} (
              <button onClick={() => removeItem(item.id)}>remove</button>)
            </li>
          </CSSTransition>
        ))}
      </TransitionGroup>
@njaremko

This comment has been minimized.

Copy link

@njaremko njaremko commented Jun 15, 2020

In case other people run into this, I ended up needing to add className?: string; to the props to allow passing in class names since CSSTransition renders as it's own div (in contrast to Vue's transition stuff) which was breaking things like the TailwindUI header animations. Had to remove the top level div, and copy the relevant classes into the CSSTransition component's className prop.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment