diff --git a/src/CSSTransition.js b/src/CSSTransition.js index 5764b372..0c8dd1f6 100644 --- a/src/CSSTransition.js +++ b/src/CSSTransition.js @@ -29,10 +29,11 @@ const removeClass = (node, classes) => * ```jsx * function App() { * const [inProp, setInProp] = useState(false); + * const nodeRef = useRef(null); * return ( *
- * - *
+ * + *
* {"I'll receive my-node-* classes"} *
*
diff --git a/src/SwitchTransition.js b/src/SwitchTransition.js index cb3a45b3..78dc375d 100644 --- a/src/SwitchTransition.js +++ b/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 ( * * node.addEventListener("transitionend", done, false)} * classNames='fade' * > - * * diff --git a/src/Transition.js b/src/Transition.js index f1fc7801..8d6a8977 100644 --- a/src/Transition.js +++ b/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 }) => ( - * - * {state => ( - *
- * I'm a fade Transition! - *
- * )} - *
- * ); + * function Fade({ in: inProp }) { + * const nodeRef = useRef(null); + * return ( + * + * {state => ( + *
+ * I'm a fade 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 ( *
- * + * * {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 - * + * * {state => ( - * + * * )} * * ``` diff --git a/www/.npmrc b/www/.npmrc new file mode 100644 index 00000000..b6f27f13 --- /dev/null +++ b/www/.npmrc @@ -0,0 +1 @@ +engine-strict=true diff --git a/www/package.json b/www/package.json index efdf8b77..7bea35a4 100644 --- a/www/package.json +++ b/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",