Use react-css-transition-replace library to handle absolute positioning

https://github.com/marnusw/react-css-transition-replace It is possible though that reactjs/react-transition-group#470 does what we want.
mnvr · Nov 22, 2023 · 15f5c2e · 15f5c2e
1 parent a60df27
commit 15f5c2e
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 48 deletions.
diff --git a/package.json b/package.json
@@ -36,10 +36,10 @@
         "hydra-synth": "^1.3.29",
         "raf-loop": "^1.1.3",
         "react": "^18.2.0",
+        "react-css-transition-replace": "^5.0.1",
         "react-device-detect": "^2.2.3",
         "react-dom": "^18.2.0",
         "react-icons": "^4.11.0",
-        "react-transition-group": "^4.4.5",
         "styled-components": "^5.3.11",
         "tldts": "^6.0.15"
     },
@@ -49,8 +49,8 @@
         "@types/node": "^20.3.2",
         "@types/p5": "1.3.3",
         "@types/react": "^18.2.14",
+        "@types/react-css-transition-replace": "^2.1.7",
         "@types/react-dom": "^18.2.6",
-        "@types/react-transition-group": "^4.4.9",
         "@types/styled-components": "^5.1.26",
         "gatsby-plugin-root-import": "^2.0.9",
         "patch-package": "^8.0.0",

diff --git a/pages/quotes/index.tsx b/pages/quotes/index.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { CSSTransition, TransitionGroup } from "react-transition-group";
+import ReactCSSTransitionReplace from "react-css-transition-replace";
 import styled from "styled-components";
 import { ensure } from "utils/ensure";
 import { randomInt, randomItem } from "utils/random";
@@ -50,62 +50,52 @@ const Quotes: React.FC = () => {
 interface QuoteContainerProps {
     quoteIndex: number;
 }
+
 /**
  * A container for a quote that animates the transition between them.
  *
- * The QuoteContainer is a {@link TransitionGroup} that has a single child - a
- * {@link CSSTransition} that wraps the children of the QuoteContainer (which'll
- * be a {@link Quote}).
- *
- * @param quoteIndex A unique index for each quote. This is set as the key of
- * the CSSTransition child, thus causing the TransitionGroup to transition the
- * child out and back in.
+ * @param quoteIndex A unique index for each quote.
  */
 const QuoteContainer: React.FC<
     React.PropsWithChildren<QuoteContainerProps>
 > = ({ quoteIndex, children }) => {
     return (
         <QuoteContainer_>
-            <TransitionGroup>
-                <CSSTransition
-                    key={quoteIndex.toString()}
-                    classNames="fade"
-                    timeout={2000}
-                >
-                    {children}
-                </CSSTransition>
-            </TransitionGroup>
+            <ReactCSSTransitionReplace
+                transitionName={"fade"}
+                transitionEnterTimeout={1000}
+                transitionLeaveTimeout={1000}
+            >
+                <div key={quoteIndex.toString()}>{children}</div>
+            </ReactCSSTransitionReplace>
         </QuoteContainer_>
     );
 };
 
 const QuoteContainer_ = styled.div`
     background-color: red;
 
-    position: relative;
-
     div {
         border: 1px solid green;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
     }
+
     .fade-enter {
         opacity: 0;
-        z-index: 1;
     }
     .fade-enter-active {
         opacity: 1;
         transition: opacity 1000ms;
     }
-    .fade-exit {
+    .fade-leave {
         opacity: 1;
     }
-    .fade-exit-active {
+    .fade-leave-active {
         opacity: 0;
         transition: opacity 1000ms;
     }
+    .fade-height {
+        transition: height 500ms;
+    }
 `;
 
 interface ParsedQuotes {

diff --git a/yarn.lock b/yarn.lock
@@ -1113,7 +1113,7 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.8.7":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.4.tgz#36fa1d2b36db873d25ec631dcc4923fdc1cf2e2e"
   integrity sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg==
@@ -2422,20 +2422,36 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-addons-css-transition-group@*":
+  version "15.0.10"
+  resolved "https://registry.yarnpkg.com/@types/react-addons-css-transition-group/-/react-addons-css-transition-group-15.0.10.tgz#3c18f8fe7789de78b2dfde13ad724104584ba644"
+  integrity sha512-AYYMb4+jsgHPsxst7e8WuWVp8qAwp9YV16FJdEXILAsp7SFKIRln1hlrw9fRKUJYte3SKqiNZ8riRXvP2WtLlA==
+  dependencies:
+    "@types/react" "^15"
+    "@types/react-addons-transition-group" "*"
+
+"@types/react-addons-transition-group@*":
+  version "15.0.10"
+  resolved "https://registry.yarnpkg.com/@types/react-addons-transition-group/-/react-addons-transition-group-15.0.10.tgz#eeaff46b9a6d318a3337fc43dd789e2c817db485"
+  integrity sha512-nV0vlq1ClUicGuDP5ocAHxsqWxjlxB+sBTF/+UMrafIJ/whkvmDrDGq/i0IcbnwptEXXmZKEQDYJ1F+0Vuao+A==
+  dependencies:
+    "@types/react" "^15"
+
+"@types/react-css-transition-replace@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@types/react-css-transition-replace/-/react-css-transition-replace-2.1.7.tgz#6ab710946d3d5c7379787c0ec6bfe32b7b019911"
+  integrity sha512-SFbjNtKXWjkiRC7jl5vaMFJORf6qsPS+2M1B1oOTVKs2NT88YycGjbS6eXrtYnqBy8z+o5Ays0t4lIx11Kq2TQ==
+  dependencies:
+    "@types/react" "^15"
+    "@types/react-addons-css-transition-group" "*"
+
 "@types/react-dom@^18.2.6":
   version "18.2.6"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.6.tgz#ad621fa71a8db29af7c31b41b2ea3d8a6f4144d1"
   integrity sha512-2et4PDvg6PVCyS7fuTc4gPoksV58bW0RwSxWKcPRcHZf0PRUGq03TKcD/rUHe3azfV6/5/biUBJw+HhCQjaP0A==
   dependencies:
     "@types/react" "*"
 
-"@types/react-transition-group@^4.4.9":
-  version "4.4.9"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.9.tgz#12a1a1b5b8791067198149867b0823fbace31579"
-  integrity sha512-ZVNmWumUIh5NhH8aMD9CR2hdW0fNuYInlocZHaZ+dgk/1K49j1w/HoAuK1ki+pgscQrOFRTlXeoURtuzEkV3dg==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react@*", "@types/react@>=16", "@types/react@^18.2.14":
   version "18.2.14"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.14.tgz#fa7a6fecf1ce35ca94e74874f70c56ce88f7a127"
@@ -2445,6 +2461,11 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@^15":
+  version "15.7.27"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-15.7.27.tgz#6ca13051229bc83901317c44e1a1ed86edc8ee1a"
+  integrity sha512-jLB0GLKJXo9uDjsucKzO32lMENh4fnE2tp8lWp6VfLshKoCeJt+GNERuSlucwY8zIlkqS5CA53IyeHwCaY+p3w==
+
 "@types/responselike@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/responselike/-/responselike-1.0.0.tgz#251f4fe7d154d2bad125abe1b429b23afd262e29"
@@ -4350,7 +4371,7 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
-dom-helpers@^5.0.1:
+dom-helpers@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
   integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
@@ -8976,7 +8997,7 @@ prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.8.1:
+prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -9129,6 +9150,14 @@ [email protected], rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-css-transition-replace@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/react-css-transition-replace/-/react-css-transition-replace-5.0.1.tgz#15f19ce06ffa4f86fd97633cee42025fe40b07f4"
+  integrity sha512-Pi5hk/FXZJ1eVkUgI8lTbGrlOz5fSe7GkSkzG1JCsL6+c7hT62Tw+dv3Wbo5nKL25QQB+iS4GdRYf051RwERqg==
+  dependencies:
+    dom-helpers "^5.2.1"
+    prop-types "^15.8.1"
+
 react-dev-utils@^12.0.1:
   version "12.0.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"
@@ -9203,16 +9232,6 @@ [email protected]:
     loose-envify "^1.1.0"
     neo-async "^2.6.1"
 
-react-transition-group@^4.4.5:
-  version "4.4.5"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
-  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    dom-helpers "^5.0.1"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"