This issue usually arises when using npm link. A linked module will resolve its dependencies in its own module tree, which is different from the one of the module that required it. As such, the npm link command installs peerDependencies as well as dependencies. You can use resolve.alias to force require(‘react’) to resolve to your … Read more
Below is an example of the correct syntax for v4 (“& $addIcon” nested within &:hover). Further down are some v5 examples. import * as React from “react”; import { render } from “react-dom”; import { Grid, makeStyles } from “@material-ui/core”; import AddIcon from “@material-ui/icons/Add”; const useStyles = makeStyles(theme => ({ outerDiv: { backgroundColor: theme.palette.grey[200], padding: … Read more
According to the principle of least privilege, this is a correct way: <InnerComponent name={object.name} image={object.image} /> This restricts InnerComponent from accidentally modifying original object or accessing properties that aren’t intended for it. Alternatively, properties could be picked from original object and passed as props: <InnerComponent {…pick(object, ‘name’, ‘image’)} /> If there are numerous properties that … Read more
To note! node-sass is deprecated as by now! Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass. Instead you can see … Read more
Jest sets the env variable to test, so I had to add my presets to the env setting in .babelrc: { “plugins”: [“syntax-dynamic-import”, “transform-runtime”], “presets”: [ [ “es2015”, { “modules”: false } ], “react”, “stage-0” ], “env”: { “start”: { “presets”: [ “react-hmre” ] }, “test”: { “presets”: [“es2015”, “react”, “stage-0”] } } }
Supposing you have pictures: string[]; – array of pictures urls defined in your component’s props. You should define componentDidMount() method in your component and then just create new Image object for each picture you want to be preloaded: componentDidMount() { this.props.pictures.forEach((picture) => { const img = new Image(); img.src = picture.fileName; }); } It forces … Read more
In case you need to keep on track of the scroll position, you can use react hooks to do so, that way it’s possible to check the scroll position any time you need it: import React, { useState, useEffect } from ‘react’; … // inside component: const [scrollPosition, setScrollPosition] = useState(0); const handleScroll = () … Read more
TLDR; If you’re looking for a way to control the contents of an <iframe> via React in a de-facto canonical way, Portals are the way to go. And as with all things Portal: Once you establish a reference to an existing and mounted DOM node (in this case that would be the contentWindow of a … Read more
For this exact case you’re right because undefined is passed as the dependencies of useEffect. This means useEffect runs on every render and thus the event handlers will unnecessarily get detached and reattached on each render. function listener() { console.log(‘click’); } function Example() { const [count, setCount] = window.React.useState(0); window.React.useEffect(() => { console.log(`adding listener ${count}`); … Read more
You can put the handleKeyUp function inside of the function given to useEffect (which is the recommended way of doing it according to the official documentation) and only add the listener and return a cleanup function when collapsed is false. useEffect(() => { if (collapsed) { return; } function handleKeyUp(event) { switch (event.key) { case … Read more