#259 updated react-transition-group dependency

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.21.0](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.20.5...v1.21.0) (2021-03-06)
+
+### Features
+* updated [react-transition-group](https://github.com/reactjs/react-transition-group) dependency
+* fixed (`findDOMNode` deprecation notice)[https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage] in StrictMode
+
 ## [1.20.5](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.20.4...v1.20.5) (2020-10-17)
 
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "gatsby-plugin-transition-link",
-	"version": "1.20.5",
+	"version": "1.21.0",
 	"description": "A link component for page transitions in gatsby.",
 	"repository": "https://github.com/TylerBarnes/gatsby-plugin-transition-link",
 	"homepage": "https://gatsby-plugin-transition-link.netlify.com/",
@@ -44,7 +44,7 @@
 		"color-convert": "^1.9.3",
 		"json-bump": "^0.1.3",
 		"polyfill-array-includes": "^1.0.0",
-		"react-transition-group": "^2.5.0",
+		"react-transition-group": "^4.4.1",
 		"requestanimationframe-timer": "^1.0.4"
 	},
 	"peerDependencies": {

src/components/TransitionHandler.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { Component, createRef } from 'react'
 import { Transition, TransitionGroup } from 'react-transition-group'
 import { Location } from '@reach/router'
 
@@ -13,6 +13,10 @@ import '../style.css'
 
 const DelayedTransition = delayTransitionRender(Transition)
 export default class TransitionHandler extends Component {
+	constructor (props) {
+		super(props);
+		this.transitionRendererRef = createRef();
+	}
 	render() {
 		const { props } = this
 		const { children, injectPageProps = true } = props
@@ -53,6 +57,7 @@ export default class TransitionHandler extends Component {
 											<DelayedTransition
 												key={pathname} // we're using seconds but transitiongroup uses ms
 												delay={getMs(entryDelay)}
+												nodeRef={this.transitionRendererRef}
 												timeout={{
 													enter: getMs(entryLength),
 													exit: getMs(exitLength),
@@ -130,6 +135,7 @@ export default class TransitionHandler extends Component {
 
 													return (
 														<TransitionRenderer
+															ref={this.transitionRendererRef}
 															mount={mount}
 															entryZindex={
 																entryZindex

src/components/TransitionRenderer.js

@@ -1,8 +1,8 @@
-import React, { Component, cloneElement } from 'react'
+import React, { Component, cloneElement, forwardRef } from 'react'
 import { setTimeout, clearTimeout } from 'requestanimationframe-timer'
 import { PublicProvider } from '../context/createTransitionContext'
 
-export default class TransitionRenderer extends Component {
+class TransitionRenderer extends Component {
 	state = {
 		shouldBeVisible: !!!this.props.appearAfter,
 	}
@@ -51,6 +51,7 @@ export default class TransitionRenderer extends Component {
 				className={`tl-wrapper ${
 					mount ? 'tl-wrapper--mount' : 'tl-wrapper--unmount'
 				} tl-wrapper-status--${transitionStatus}`}
+				ref={this.props.innerRef}
 				style={{
 					zIndex: mount ? entryZindex : exitZindex,
 					opacity: this.state.shouldBeVisible ? 1 : 0,
@@ -68,3 +69,7 @@ export default class TransitionRenderer extends Component {
 		)
 	}
 }
+
+export default forwardRef(
+  (props, ref) => (<TransitionRenderer innerRef={ref} {...props} />)
+);

yarn.lock

@@ -919,7 +919,14 @@
     "@babel/plugin-transform-react-jsx-source" "^7.12.1"
     "@babel/plugin-transform-react-pure-annotations" "^7.12.1"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+  version "7.13.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.9.tgz#97dbe2116e2630c489f22e0656decd60aaa1fcee"
+  integrity sha512-aY2kU+xgJ3dJ1eU6FMB9EH8dIe8dmusF1xEku52joLvw6eAFN0AI+WxCLDnpev2LEejWBAy2sBvBOBAjI3zmvA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime@^7.8.4":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
   integrity sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==
@@ -1558,6 +1565,11 @@ cross-spawn@^6.0.0:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
+csstype@^3.0.2:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.7.tgz#2a5fb75e1015e84dd15692f71e89a1450290950b"
+  integrity sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -1648,12 +1660,13 @@ detect-newline@^2.1.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
   integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=
 
-dom-helpers@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
-  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+dom-helpers@^5.0.1:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.0.tgz#57fd054c5f8f34c52a3eeffdb7e7e93cd357d95b"
+  integrity sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==
   dependencies:
-    "@babel/runtime" "^7.1.2"
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
 
 dot-prop@^5.1.0:
   version "5.3.0"
@@ -3106,20 +3119,15 @@ react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-lifecycles-compat@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
-  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
-
-react-transition-group@^2.5.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
-  integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
+react-transition-group@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
+  integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
   dependencies:
-    dom-helpers "^3.4.0"
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
-    react-lifecycles-compat "^3.0.4"
 
 read-pkg-up@^1.0.1:
   version "1.0.1"