DEV Community: Nicolas Erny

A journey into the world of refs and ref forwarding in React

Nicolas Erny — Mon, 30 May 2022 17:09:43 +0000

In many React projects, we need to interact directly with the DOM.
For example, when we want to set the focus to an element. How to do that in React?

Let's start by creating a custom input component.

function MyInput({ ...props }: React.InputHTMLAttributes<HTMLInputElement>) {
  return <input {...props} />;
}

Now, we want to get the focus after the component is mounted. To do that, we need to get access to the DOM element.
React refs are a way to get a reference to a DOM node. We use the useRef hook to create a ref object called myInputRef. Then, we add the ref to the input element.
myInputRef enables us to call the focus method on the DOM element. As we want to get the focus after it's mounted, we need to use the useEffect hook. We end up with the following code:

function MyInput({ ...props }: React.InputHTMLAttributes<HTMLInputElement>) {
  const myInputRef = React.useRef<HTMLInputElement>(null);
  React.useEffect(() => {
    if (myInputRef.current) {
      myInputRef.current.focus();
    }
  }, []);
  return <input ref={myInputRef} {...props} />;
}

Imagine that our goal is to create a generic custom component. We do not want to get the focus each time we use our React component. The idea is to be more flexible. We would like to expose a ref and let the parent component decide what to do (set the focus or not).
The naive approach is to add a ref property to MyInput.

function MyInput({
  ref,
  ...props
}: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> ) {
  return <input ref={ref} {...props} />;
}

Here's the App component that uses MyInput:

function App() {
  const inputRef = useRef<HTMLInputElement>(null);

  React.useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    <div>
      <MyInput ref={inputRef} />
    </div>
  );
}

It does not work, and we get the following warning:

Warning: MyInput: ref is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop.

We cannot use a prop called ref, so let's rename it. Here's what the code would be like:

function MyInput({
  myRef,
  ...props
}: React.InputHTMLAttributes<HTMLInputElement> & {
  myRef: React.Ref<HTMLInputElement>;
}) {
  return <input ref={myRef} {...props} />;
}

function App() {
  const inputRef = useRef<HTMLInputElement>(null);

  React.useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    <div>
      <MyInput myRef={inputRef} />
    </div>
  );
}

It works. But according to the React documentation, it's not the recommended solution. A component should use the ref property to be compatible with other components and libraries.
Ref is not available in props, so we must wrap the component in forwardRef. Now, our function component accepts ref as the second argument.

Let's refactor our code to use forwardRef instead. Here's the final version:

type MyInputProps = React.DetailedHTMLProps<
  React.InputHTMLAttributes<HTMLInputElement>,
  HTMLInputElement
>;
const MyInput = React.forwardRef<HTMLInputElement, MyInputProps>(function (
  { ...props },
  ref
) {
  return <input ref={ref} {...props} />;
});

function App() {
  const inputRef = useRef<HTMLInputElement>(null);

  React.useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    <div>
      <MyInput ref={inputRef} />
    </div>
  );
}

This technique for automatically passing a ref through a component to one of its children is called ref forwarding.

I hope that gives you an idea of a good way to use React forwardRef in Typescript.

Create a React component library with Vite and Typescript

Nicolas Erny — Mon, 11 Apr 2022 16:55:13 +0000

Most of the time, we use our favorite tool to create a React application: create react app, next, gatsby...
But, it's a different story when it comes to building a component library. The choice is not straightforward. This article will show how to create a library with Vite and Typescript.

Why Vite?

Vite is a modern frontend tooling with excellent performance. You can get more details here. Out of the box, it supports typescript and library bundles. Therefore, it's a perfect choice to create a React library.

How to structure and organize our project?

Let's start creating a monorepo. We use yarn workspaces to manage dependencies.
To configure our monorepo, we need to create a package.json file at the repository's root.



{
  "name": "lib-example",
  "private": true,
  "workspaces": {
    "packages": [
      "packages/*",
      "sites/*"
    ]
  },  
}

The repository has two folders:

packages containing the component library package
sites containing the site to test the library

Here's the tree structure.



react-library-vite-example
|- packages
|  |- my-lib
|- sites
|  |- my-site
|- package.json
|- yarn.lock

Library package

Inside the packages folder, let's create a new Vite project:



yarn create vite my-lib --template react-ts

By default, it creates a React web app configured with typescript. Now, we have to customize it to use the library mode from Vite.

First, we have to install a vite plugin to help us generate the type definitions for our components.



yarn add --dev vite-plugin-dts

To bundle the library, we need to update the vite.config.js file.



import react from '@vitejs/plugin-react';
import path from 'node:path';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';

export default defineConfig({
    plugins: [
        react(),
        dts({
            insertTypesEntry: true,
        }),
    ],
    build: {
        lib: {
            entry: path.resolve(__dirname, 'src/lib/index.ts'),
            name: 'MyLib',
            formats: ['es', 'umd'],
            fileName: (format) => `my-lib.${format}.js`,
        },
        rollupOptions: {
            external: ['react', 'react-dom', 'styled-components'],
            output: {
                globals: {
                    react: 'React',
                    'react-dom': 'ReactDOM',
                    'styled-components': 'styled',
                },
            },
        },
    },
});

Notice that it's also important to externalize any dependencies you do not want to bundle into your library: react, react-dom, and styled-components.
Our rollup configuration generates two bundle formats: es and umd.

We add the following button component (MyButton.tsx) to our library as an example.



import styled from 'styled-components';

const MyButton = styled.button`
    border: none;
    border-radius: 0.5rem;
    background-color: #186faf;
    color: hsl(0deg, 0%, 98%);
    padding: 0.75rem;
    cursor: pointer;
    &:hover {
        background-color: #0a558c;
    }
    &:focus {
        outline: none;
        box-shadow: 0 0 0 2px #62b0e8;
        background-color: #0a558c;
    }
`;

export default MyButton;

All the public React components are exported in the file src/lib/index.ts.



export { default as MyButton } from './MyButton';

Here's the updated package.json for our library:



{
    "name": "my-lib",
    "version": "0.0.0",
    "scripts": {
        "dev": "vite",
        "build": "tsc && vite build",
        "preview": "vite preview"       
    },
    "dependencies": {
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "styled-components": "^5.3.3"
    },
    "devDependencies": {
        "@babel/core": "^7.16.12",
        "@types/node": "^17.0.12",
        "@types/react": "^17.0.38",
        "@types/react-dom": "^17.0.11",
        "@types/styled-components": "^5.1.21",
        "@vitejs/plugin-react": "^1.1.4",
        "acorn-jsx": "^5.3.2",
        "babel-loader": "^8.2.3",
        "typescript": "^4.5.5",
        "vite": "^2.7.13",
        "vite-plugin-dts": "^0.9.9"
    },
    "license": "UNLICENSED",
    "peerDependencies": {
        "react": "^16.8.0 || 17.x",
        "react-dom": "^16.8.0 || 17.x",
        "styled-components": "^5.0.0"
    },
    "files": [
        "dist"
    ],
    "main": "./dist/my-lib.umd.js",
    "module": "./dist/my-lib.es.js",
    "types": "./dist/index.d.ts",
    "exports": {
        ".": {
            "import": "./dist/my-lib.es.js",
            "require": "./dist/my-lib.umd.js"
        }
    }
}

Run yarn build to compile the library.

As we bundle the dependencies into the library (except for the externals), we have to clean up the package.json of the published npm package. We do this by adding a prepack script.



"prepack": "json -f package.json -I -e \"delete this.devDependencies; delete this.dependencies\"",

I use a CLI for working with JSON (yarn add -D json).

Website to test the component library

Let's start by creating a new Vite project in the sites folder.



yarn create vite my-site --template react-ts

We need to add the following dependency to our package.json file to test our component library:



"dependencies": {
   "my-lib": "*",
   ...
},

Now, we can reference and use our button component.



import { MyButton } from 'my-lib';

function App() {    
    return (
        <div className="App">
            ...
                    <MyButton onClick={...}>Click here!</MyButton>
            ...                
        </div>
    );
}

export default App;

Run yarn install and yarn run dev to start the dev server.

Configure storybook

We also want to create documentation for our UI components. Storybook is a fantastic project to help us create a playground for our React components.

Run the following command to configure Storybook:



cd /packages/my-lib && npx sb init --builder storybook-builder-vite

At the time of writing, the interactions addon does not work well with Vite. Here's the customized configuration (.storybook/main.js):



module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: "@storybook/react",
  core: {
    builder: "storybook-builder-vite",
  },
};

Finally, we create a story file for our button component.



import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
import MyButton from './MyButton';

const meta: ComponentMeta<typeof MyButton> = {
    title: 'Design System/MyButton',
    component: MyButton,
};
export default meta;

export const Primary: ComponentStoryObj<typeof MyButton> = {
    args: {
        disabled: false,
        children: 'Hello',
    },
};

Run yarn run storybook to start the storybook.

If you want to learn more about Storybook, check out the official documentation.

What's next?

We've just created an excellent Vite startup project. But, we can go further and configure additional tools such as eslint, prettier, jest...

You can find the source code on Github.
This has been helpful for me in my projects. Hopefully it helps you as well.

Table with a fixed first column

Nicolas Erny — Fri, 24 Dec 2021 13:58:36 +0000

On many web projects, we need to display tabular data. We don't need a fancy library to deal with tables most of the time. When the amount of data is small, features such as virtualization are over-skilled. Regular HTML tables can do the job. But it does not mean that we cannot add handy features such as a fixed first column.

Let's start with a basic HTML table.



  <table>
    <thead>
      <tr>
        <th>DATA1</th>
        <th>DATA2</th>
        <th>DATA3</th>
        <th>DATA4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
      </tr>
      <tr>
        <td>Other values</td>
        <td>Other values</td>
        <td>Other values</td>
        <td>Other values</td>
      </tr>
      <tr>
        <td>Other values</td>
        <td>Other values</td>
        <td>Other values</td>
        <td>Other values</td>
      </tr>
      <tr>
        <td>Other values</td>
        <td>Other values</td>
        <td>Other values</td>
        <td>Other values</td>
      </tr>
    </tbody>
  </table>

With some styling, we end up with the following UI.

When horizontal scrolling is required, we want a fixed first column. Let's see how to implement this feature in CSS.

First, we need to use overflow-x:auto to make the scrollbar appears when necessary.
Sadly, setting this property directly to the table element seems to have no effect.
According to the CSS specifications, overflow properties only apply to block, flex, and grid containers. We could change the display property of the table. But, semantically, it's a table, not a block. Therefore, I prefer to use a wrapper element.



<div class="container">
  <table>
    <thead>
      <tr>
        <th>DATA1</th>
        <th>DATA2</th>
        <th>DATA3</th>
        <th>DATA4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
      </tr>      
    </tbody>
  </table>
</div>



.container {
  overflow-x: auto;
}

When we scroll horizontally, the first column should "stick" the left edge of the table. This is where sticky positioning comes to into play.
The idea about sticky positioning is that as you scroll, an element can "stick" to the edge.
Here's what the CSS code would be like:



tr>th:first-child,tr>td:first-child {
  position: sticky;
  left: 0;
}

The tr>th:first-child,tr>td:first-child selector only applies sticky positioning to the first column cells.
This solution seems pretty good. But, not so fast! With that, you'll get the following side effect:

The first column is sticky (and it works), but we can still see the content of other columns (under our first column) while we scroll.
To understand this issue, let's have a look at our background definition:



tr:nth-child(odd)  {
   background: $white;
}

tr:nth-child(even)  {
   background: $gray-200;
}

The background property is defined at the row level. It means that the cell has no background. However, we want the first column cells to have a background. So it hides other cells when we scroll.
We end up with this CSS:



tr:nth-child(odd) td {
   background: $white;
}

tr:nth-child(even) td {
   background: $gray-200;
}

So here's the final version of the CSS:



.container {
  overflow-x: auto;
}

tr>th:first-child,tr>td:first-child {
  position: sticky;
  left: 0;
}

tr:nth-child(odd) td {
   background: $white;
}

tr:nth-child(even) td {
   background: $gray-200;
}

And really that's it.
You can find the source code here.

Blurred image placeholder with Next.js image and Cloudinary

Nicolas Erny — Thu, 02 Dec 2021 12:51:05 +0000

Most of the time, we don't want to manage image optimizations ourselves. Libraries such as Next.js/image are handy to deal with responsive images. In addition to Next.js image, I often use Cloudinary, which is a media management service.
Two key benefits:

Use a CDN dedicated to our images
Easy to apply transformations to an image: a URL-based image API

Next.js provides excellent integration with Cloudinary. For example, we can use the following next.config.js file.

const cloudinaryBaseUrl = `https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/upload/`;
module.exports = {  
  images: {
    loader: "cloudinary",
    path: cloudinaryBaseUrl,
  },
};

where the CLOUDINARY_CLOUD_NAME env variable contains our cloudinary cloud name.

We're ready to build a basic app to display an image using next/image and Cloudinary. Here's what a React code would be like:

 function Home({ exampleImage }) {
    return (
        <div className={styles.container}>            
            <main className={styles.main}>
                <h1 className={styles.title}>Blurred image placeholder</h1>
                <h2 className={styles.subtitle}>with Next.js image and cloudinary</h2>
                <div className={styles.imagewrapper}>
                    <Image
                        src={exampleImage.src}
                        alt="Example"
                        width="1920"
                        height="1280"
                        layout="responsive"
                        quality="75"
                        sizes="60vw"                        
                    />
                </div>
            </main>
        </div>
    );
}

It would be nice to display a blurry image while the browser loads the real one.

But, unfortunately, next/image does not generate the blurred placeholder automatically when we use the Cloudinary loader.

Let's try to add a blurred image placeholder. Next/image provides two properties: placeholder and blurDataURL. We will rely on Cloudinary to get a low-quality, blurred picture. It leads to the following function to generate a base64 encoded data URL:

export async function getBase64ImageUrl(imageId: string): Promise<string | undefined> {
    const response = await fetch(`${process.env.CLOUDINARY_BASE_URL}w_100/e_blur:1000,q_auto,f_webp${imageId}`);
    const buffer = await response.arrayBuffer();
    const data = Buffer.from(buffer).toString('base64');
    return `data:image/webp;base64,${data}`;
}

Finally, we have to generate the data URL at compile-time. With Next.js, it's pretty straightforward by implementing the getStaticProps function:

export async function getStaticProps() {
    const imageSrc = process.env.CLOUDINARY_EXAMPLE_IMAGE_SRC;
    if (!imageSrc) {
        throw new Error('Missing CLOUDINARY_EXAMPLE_IMAGE_SRC env variable');
    }

    const blurDataUrl = await getBase64ImageUrl(imageSrc);
    return {
        props: {
            exampleImage: {
                src: imageSrc,
                blurDataUrl: blurDataUrl,
            },
        },
    };
}

where the CLOUDINARY_EXAMPLE_IMAGE_SRC env variable contains our cloudinary image id.

So here's the final version of the React code:

function Home({ exampleImage }: InferGetStaticPropsType<typeof getStaticProps>) {
    return (
        <div className={styles.container}>            
            <main className={styles.main}>
                <h1 className={styles.title}>Blurred image placeholder</h1>
                <h2 className={styles.subtitle}>with Next.js image and cloudinary</h2>
                <div className={styles.imagewrapper}>
                    <Image
                        src={exampleImage.src}
                        alt="Example"
                        width="1920"
                        height="1280"
                        layout="responsive"
                        quality="75"
                        sizes="60vw"
                        placeholder="blur"
                        blurDataURL={exampleImage.blurDataUrl}
                    />
                </div>
            </main>
        </div>
    );
}

You can find the source code on Github.
This has been helpful for me in my projects. Hopefully it helps you as well.

Typescript: playing with type operators

Nicolas Erny — Wed, 03 Nov 2021 16:29:53 +0000

Recently, I discovered more advanced techniques in Typescript. It helps me to rely more on type inference and define fewer types.

Let's begin our journey with some React code to display SVG icons.

function App() {
  return (
    <div className="App">
      {["info", "warning", "error"].map((name) => (
        <svg
          key={name}
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            d={getIconPath(name)}
          ></path>
        </svg>
      ))}      
    </div>
  );
}

To make it work, we need to define an object containing all the icon paths and a function to get an icon path.

const iconPaths = {
  info: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
  warning:
    "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z",
  error: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
};

function getIconPath(name: string) {
  return iconPaths[name]; // TS error
}

As we define the icon name as a string, we have two issues:

We get a Typescript error:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type

We have to check if the icon name exists.

It leads to the following code:

const iconPaths = {
  info: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
  warning:
    "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z",
  error: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
} as { [name: string]: string };

function getIconPath(name: string) {
  if (!iconPaths.hasOwnProperty(name)) {
    throw new Error(`Unknown icon name: ${name}`);
  }
  return iconPaths[name];
}

It works well. But honestly, we can do better. Let's see if we can add some constraints on the icon name. It could be interesting to check if it exists at compile-time instead of run-time.

The first idea is to define a new type that describes the valid icon names. Here's what that same code would be like:

type IconName = "info" | "warning" | "error";

const iconPaths = {
  info: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
  warning:
    "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z",
  error: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
};

function getIconPath(name: IconName) {
  return iconPaths[name];
}

This solution is pretty good. Maybe we could do even better though:

const iconPaths = {
  info: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
  warning:
    "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z",
  error: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
};

function getIconPath(name: keyof typeof iconPaths) {
  return iconPaths[name];
}

The type operators (keyof and typeof) are handy. It helps us to infer the icon name type from the iconPaths object. Now, we don't need to define an explicit type (IconName).

Let's talk a second about this type declaration:

keyof typeof iconPaths

It means that this type is the union of the keys of the iconPaths object ("info" | "warning" | "error").

Finally, let's try to use the getIconPath function in our React component:

function App() {
  return (
    <div className="App">
      {["info", "warning", "error"].map((name) => (
        <svg
          key={name}
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            d={getIconPath(name)}
          ></path>
        </svg>
      ))}      
    </div>
  );
}

Not so fast! With that you'll get the following TypeScript compilation error:

Argument of type 'string' is not assignable to parameter of type '"info" | "warning" | "error"'.

The reason for this is because the getIconPath function only accepts a certain set of values. Therefore, we have to cast the array of strings to an array of literals.

function App() {
  return (
    <div className="App">
      {(["info", "warning", "error"] as const).map((name) => (
        <svg
          key={name}
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            d={getIconPath(name)}
          ></path>
        </svg>
      ))}      
    </div>
  );
}

This has been helpful for me in my projects. Hopefully it helps you as well.

Flexbox and auto margins

Nicolas Erny — Sun, 10 Oct 2021 15:39:20 +0000

When I started using flexbox, it seemed like my secret weapon to solve every layout problem. For example, centering elements become much easier. No need to use auto margins, the justify-content: center property does the job pretty well. But does it mean that auto margins are useless when we use flexbox?

Let's start with a basic website header containing a logo and two other links (contact and log in).

Here's the HTML:

<div class="wrapper">
  <a href="" class="logo">My logo</a>
  <a href="" class="contacts">Contact</a>
  <a href="" class="login">Log in</a>
</div>

Now, it's time to discuss styling.

Where to start?

The first idea is to use the justify-content: space-between property and let the logo element grow.

.wrapper {
  display: flex;
  gap: 1rem;
  padding: 1rem 3rem;
  justify-content: space-between;
}

.logo {
  flex: 1;
}

At first glance, this solution looks perfect. But there is a significant drawback. The logo is a flex element that can grow (flex: 1) and consumes excess space to push the other links to the right side of the page. But our logo is a link. So it means that the space between the logo and the contact element is now clickable!

How to fix this issue?

The usual way is to wrap the right-sided links inside a div tag. Along with the justify-content: space-between property, the header works perfectly.

<div class="wrapper">
  <a href="">My logo</a>
  <div class="wrapper-links">
    <a href="" class="contacts">Contact</a>
    <a href="" class="login">Log in</a>
  </div>
</div>

.wrapper {
  display: flex;
  gap: 1rem;
  padding: 1rem 3rem;
  justify-content: space-between;
}
.wrapper-links {
  display: flex;
  gap: 1rem;
}

What if I don't want to change the structure of the HTML code?

In this case, auto margins are very handy. Auto is a greedy property. It means that it can take all the available space. So, if I use margin-right: auto, it will push the logo as far away as possible from the other links.

<div class="wrapper">
  <a href="" class="logo">My logo</a>
  <a href="" class="contacts">Contact</a>
  <a href="" class="login">Log in</a>
</div>

.wrapper {
  display: flex;
  gap: 1rem;
  padding: 1rem 3rem;
  justify-content: space-between;
}
.logo {
  margin-right: auto;
}

I hope you found this trick helpful.
You can find the source code here.