... in the previous chapters...
TypeScript-friendly useSize from @react-hook/resize-observer.
So you went to https://www.npmjs.com/package/@react-hook/resize-observer and copied useSize, but it has a bunch of typescript errors, and it pisses you off (I know it does).
Here's a version that is TypeScript-friendly... And not just that, it's a complete file you can put in your project and import from your components:
Here's a version that is TypeScript-friendly... And not just that, it's a complete file you can put in your project and import from your components:
import useResizeObserver from "@react-hook/resize-observer" import { useLayoutEffect, useState } from "react" const useSize = (target:any) => { const [size, setSize] = useState<DOMRectReadOnly>() useLayoutEffect(() =>...Argument of type 'FormData' is not assignable to parameter of type 'string | string[][] | Record | URLSearchParams | undefined'.
It's very disappointing when you find this issue was there for 5 years and it was Closed without being resolved.
Here's the full error as shown by TypeScript:
Here's the full error as shown by TypeScript:
const fd = new FormData(form); const values = new URLSearchParams(fd).toString(); Argument of type 'FormData' is not assignable to parameter of type 'string | string[][] | Record<string, string> | URLSearchParams | undefined'. Type 'FormData' is missing the following properties from type 'URLSearchParams': size, sort...Group in a group with TailwindCSS.
Some time ago, there was a common problem of having multiple nested
group classes. Imagine having a main menu dropdown group, where top level elements are groups, and sub-level elements are groups as well. You might be tempted to use something like this:<ul class="relative"> <li class="group"> Top level item <ul class="hidden group-hover:block"> <li class="group"> Sub level items will be here <ul class="hidden group-hover:block"> <li>Sub-sub level item 1</li> <li>Sub-sub level item 2</li> <li>Sub-sub level item 3</li> </ul> </li> </ul> </li> </ul>Another day, another TypeScript challenge with useRef.
How many times per day you swear when writing React code with TypeScript?..
Today I got this:
Today I got this:
Type 'MutableRefObject<HTMLInputElement | undefined>' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'. Type 'MutableRefObject<HTMLInputElement | undefined>' is not assignable to type 'RefObject<HTMLInputElement>'. Types of property 'current' are incompatible. Type 'HTMLInputElement | undefined' is not assignable to type 'HTMLInputElement | null'. Type 'undefined' is not assignable to type 'HTMLInputElement | null'.ts(2322)clearTimeout or clearInterval in React Native views with React Navigation
When working on a regular React app, it is common to initialize some hooks after the component is mounted, and unbind them after the component is unmounted. However, while working on a React Native app, you might have noticed that the views are actually not unmounted, and as such your bound events and background tasks continue to run from the previous view. Here's what you can do.
useFocusEffect to the rescue
useFocusEffect to the rescue
useFocusEffect is a special hook from @react-navigation/native,...How to resize all JPGs in a folder to PNGs with a maximum width using FFmpeg?
FFmpeg is not only for converting videos, you know? I'll go straight to the point, here's how I use it.
This one command will get all JPGs in a folder, convert to PNGs and downscale it if it's more than 512px width:
This one command will get all JPGs in a folder, convert to PNGs and downscale it if it's more than 512px width:
for i in *.jpg; do ffmpeg -y -i "$i" -vf "scale='min(512,iw)':-1" -sws_flags bilinear "${i%.*}.png"; done How to convert all SVGs in a folder to PNG with Docker image?
I recently stumbled across this simple problem and realized, that I actually don't want to install any app like Inkscape just to do that. Came across this nice and simple docker image https://hub.docker.com/r/burke/svg2png.
Here's how I used it. First, I tried to run it against a single file to see if that works at all:
Here's how I used it. First, I tried to run it against a single file to see if that works at all:
docker run --rm -v `pwd`:/svg burke/svg2png "Logo.svg" -w 256Next.js ChunkLoadError: Loading chunk failed after deploying.
Everything was working fine locally, but the whole console gets red with
Here are the steps that helped in my situation:
Your TypeScript project can't find
You probably use VS Code, am I right? Then, restart your IDE. Yes, simple as that...
ChunkLoadError after you deploy to production. Moreover, the frontend becomes blank white and you see Application error: a client-side exception has occurred (see the browser console for more information). The issue seems to be here for a while, and it looks like no-one knows which part exactly is responsible for the error (Next.js or Webpack or both), but the workaround is present.Here are the steps that helped in my situation:
Your TypeScript project can't find
expo/tsconfig.base, although you are sure it is there (besides, the project works just fine). Here's the fix.You probably use VS Code, am I right? Then, restart your IDE. Yes, simple as that...
(0 , _genMapping.maybeAddMapping) is not a function
You run yarn start or yarn dev and you see the error below? Neither running yarn install, nor using a different Node version helps?
Storybook not building due to string-width ES Module dependency error.
You upgraded or just installed the latest Storybook 7 and now you can't build the project. No matter which Node version, NPM, Yarn, whatever other modules you have.
Error [ERR_REQUIRE_ESM]: require() of ES Module /x/node_modules/string-width/index.js from /x/node_modules/cli-table3/src/utils.js not supported. Instead change the require of index.js in /x/node_modules/cli-table3/src/utils.js to a dynamic import() which is available in all CommonJS modules. at Object.<anonymous> (/x/node_modules/cli-table3/src/utils.js:1:21) at Object.<anonymous> (/x/node_modules/cli-table3/src/table.js:2:15) at Object.<anonymous> (/x/node_modules/cli-table3/index.js:1:18) at Object.<anonymous> (/x/node_modules/@storybook/core-server/dist/index.js:113:7858) at Object.<anonymous> (/x/node_modules/@storybook/cli/dist/generate.js:11:4494) at Object.<anonymous> (/x/node_modules/@storybook/cli/bin/index.js:9:1) at Object.<anonymous> (/x/node_modules/storybook/index.js:3:1) { code:...How to call child component method with forwardRef and useImperativeHandle in React
Calling a child method is a common architecture problem that occurs in a React app. You can pass individual properties to child components, you can alter the component state inside of the same component, but how to actually call another component's method?
There's a way to do that by using a combination of
What exactly are those functions for? Let's quote the documentation:
There's a way to do that by using a combination of
forwardRef with useImperativeHandle. What exactly are those functions for? Let's quote the documentation:
forwardRef lets...