Use nodeRef in code examples

src/CSSTransition.js

@@ -29,10 +29,11 @@ const removeClass = (node, classes) =>
  * ```jsx
  * function App() {
  *   const [inProp, setInProp] = useState(false);
+ *   const nodeRef = useRef(null);
  *   return (
  *     <div>
- *       <CSSTransition in={inProp} timeout={200} classNames="my-node">
- *         <div>
+ *       <CSSTransition nodeRef={nodeRef} in={inProp} timeout={200} classNames="my-node">
+ *         <div ref={nodeRef}>
  *           {"I'll receive my-node-* classes"}
  *         </div>
  *       </CSSTransition>

src/SwitchTransition.js

@@ -89,14 +89,18 @@ const enterRenders = {
  * ```jsx
  * function App() {
  *  const [state, setState] = useState(false);
+ *  const helloRef = useRef(null);
+ *  const goodbyeRef = useRef(null);
+ *  const nodeRef = state ? goodbyeRef : helloRef;
  *  return (
  *    <SwitchTransition>
  *      <CSSTransition
  *        key={state ? "Goodbye, world!" : "Hello, world!"}
+ *        nodeRef={nodeRef}
  *        addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
  *        classNames='fade'
  *      >
- *        <button onClick={() => setState(state => !state)}>
+ *        <button ref={nodeRef} onClick={() => setState(state => !state)}>
  *          {state ? "Goodbye, world!" : "Hello, world!"}
  *        </button>
  *      </CSSTransition>

src/Transition.js

@@ -37,6 +37,7 @@ export const EXITING = 'exiting';
  *
  * ```jsx
  * import { Transition } from 'react-transition-group';
+ * import { useRef } from 'react';
  *
  * const duration = 300;
  *
@@ -52,18 +53,21 @@ export const EXITING = 'exiting';
  *   exited:  { opacity: 0 },
  * };
  *
- * const Fade = ({ in: inProp }) => (
- *   <Transition in={inProp} timeout={duration}>
- *     {state => (
- *       <div style={{
- *         ...defaultStyle,
- *         ...transitionStyles[state]
- *       }}>
- *         I'm a fade Transition!
- *       </div>
- *     )}
- *   </Transition>
- * );
+ * function Fade({ in: inProp }) {
+ *   const nodeRef = useRef(null);
+ *   return (
+ *     <Transition nodeRef={nodeRef} in={inProp} timeout={duration}>
+ *       {state => (
+ *         <div ref={nodeRef} style={{
+ *           ...defaultStyle,
+ *           ...transitionStyles[state]
+ *         }}>
+ *           I'm a fade Transition!
+ *         </div>
+ *       )}
+ *     </Transition>
+ *   );
+ * }
  * ```
  *
  * There are 4 main states a Transition can be in:
@@ -80,11 +84,15 @@ export const EXITING = 'exiting';
  * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):
  *
  * ```jsx
+ * import { Transition } from 'react-transition-group';
+ * import { useState, useRef } from 'react';
+ *
  * function App() {
  *   const [inProp, setInProp] = useState(false);
+ *   const nodeRef = useRef(null);
  *   return (
  *     <div>
- *       <Transition in={inProp} timeout={500}>
+ *       <Transition nodeRef={nodeRef} in={inProp} timeout={500}>
  *         {state => (
  *           // ...
  *         )}
@@ -390,9 +398,12 @@ class Transition extends React.Component {
 
 Transition.propTypes = {
   /**
-   * A React reference to DOM element that need to transition:
+   * A React reference to the DOM element that needs to transition:
    * https://stackoverflow.com/a/51127130/4671932
    *
+   *   - This prop is optional, but recommended in order to avoid defaulting to
+   *      [`ReactDOM.findDOMNode`](https://reactjs.org/docs/react-dom.html#finddomnode),
+   *      which is deprecated in `StrictMode`
    *   - When `nodeRef` prop is used, `node` is not passed to callback functions
    *      (e.g. `onEnter`) because user already has direct access to the node.
    *   - When changing `key` prop of `Transition` in a `TransitionGroup` a new
@@ -422,9 +433,9 @@ Transition.propTypes = {
    * specific props to a component.
    *
    * ```jsx
-   * <Transition in={this.state.in} timeout={150}>
+   * <Transition nodeRef={nodeRef} in={this.state.in} timeout={150}>
    *   {state => (
-   *     <MyComponent className={`fade fade-${state}`} />
+   *     <MyComponent ref={nodeRef} className={`fade fade-${state}`} />
    *   )}
    * </Transition>
    * ```

www/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

www/package.json

@@ -12,6 +12,9 @@
   },
   "author": "",
   "license": "MIT",
+  "engines": {
+    "node": "<=16"
+  },
   "dependencies": {
     "@babel/core": "^7.3.4",
     "babel-preset-gatsby": "^2.7.0",