Rename AnimationGroup to TransitionGroup

README.md

@@ -152,14 +152,13 @@ Same as [useAnimation](#useanimation), but it drives function not React element.
 ### useTransitionAnimation
 
 A hook to compose multiple [useAnimation](#useanimation) and plays them when element enter/update/exits.
-This hook must be used under [AnimationGroup component](#animationgroup).
+This hook must be used under [TransitionGroup component](#TransitionGroup).
 
 [Examples](./stories/hooks/useTransitionAnimation.stories.tsx)
 
-### AnimationGroup
+### TransitionGroup
 
-A component to provide some behavior to its children.
-Currently it only detects enter/update/exit of children by key, that works similar to [TransitionGroup of react-transition-group](https://reactcommunity.org/react-transition-group/transition-group).
+A component to manage enter/update/exit of its children by key, that works similar to [TransitionGroup of react-transition-group](https://reactcommunity.org/react-transition-group/transition-group).
 
 ## Use polyfill
 

src/react/components/AnimationGroup.tsx → src/react/components/TransitionGroup.tsx

@@ -53,13 +53,13 @@ const Provider = ({
   );
 };
 
-export type AnimationGroupProps = {
+export type TransitionGroupProps = {
   children: ReactElement | ReactElement[];
 };
 
-export const AnimationGroup = ({
+export const TransitionGroup = ({
   children,
-}: AnimationGroupProps): ReactElement => {
+}: TransitionGroupProps): ReactElement => {
   const elemsRef = useRef<ReactElement[]>(null!);
   const prevElems = elemsRef.current || [];
   const elems = Children.map(children, (c) => c);

src/react/components/index.ts

@@ -1,2 +1,2 @@
-export { AnimationGroup } from "./AnimationGroup";
-export type { AnimationGroupProps } from "./AnimationGroup";
+export { TransitionGroup } from "./TransitionGroup";
+export type { TransitionGroupProps } from "./TransitionGroup";

src/react/hooks/useTransitionAnimation.ts

@@ -4,7 +4,7 @@ import {
   TransitionNotifierContext,
   TransitionState,
   TransitionStateContext,
-} from "../components/AnimationGroup";
+} from "../components/TransitionGroup";
 import type { AnimationHandle } from "./useAnimation";
 import {
   AnimationController,

stories/hooks/useTransitionAnimation.stories.tsx

@@ -1,7 +1,7 @@
 import { StoryObj } from "@storybook/react";
 import React, { useEffect, useRef, useState } from "react";
 import {
-  AnimationGroup,
+  TransitionGroup,
   AnimationOptions,
   useAnimation,
   useTransitionAnimation,
@@ -61,11 +61,11 @@ export const Input: StoryObj = {
           <input value={value} onChange={(e) => setValue(e.target.value)} />
         </div>
         <div>
-          <AnimationGroup>
+          <TransitionGroup>
             {value.split("").map((t, i) => (
               <Text key={i}>{t}</Text>
             ))}
-          </AnimationGroup>
+          </TransitionGroup>
         </div>
       </div>
     );
@@ -133,13 +133,13 @@ export const Alphabet: StoryObj = {
       <>
         <svg width={600} height={400}>
           <g transform={`translate(${25},${50})`}>
-            <AnimationGroup>
+            <TransitionGroup>
               {texts.map((t, i) => (
                 <SvgText key={t} i={i}>
                   {t}
                 </SvgText>
               ))}
-            </AnimationGroup>
+            </TransitionGroup>
           </g>
         </svg>
         <style>{`text { font: bold 28px monospace; }`}</style>
@@ -230,11 +230,11 @@ export const Expand: StoryObj = {
             alignContent: "flex-start",
           }}
         >
-          <AnimationGroup>
+          <TransitionGroup>
             {expanded
               ? rects.map((i) => <ExpandRect key={i} i={i} length={length} />)
               : []}
-          </AnimationGroup>
+          </TransitionGroup>
         </div>
       </>
     );