DEV Community: Stefan Kolb

React prop type validation with Zod

Stefan Kolb — Tue, 30 Dec 2025 14:32:55 +0000

When a React component receives data from elsewhere in your application - or from an external source - there’s always a chance that the shape of that data isn’t what you expect. In plain JavaScript these errors can surface only at runtime, often deep inside the component tree. A silent type mismatch can lead to hard‑to‑debug bugs, broken UI, or even security vulnerabilities.

Prop type validation sits at the boundary where data enters your component. By validating props at runtime you guarantee that the component behaves predictably, no matter where its data originates.

Prior to React 19, the prop-types package was the go‑to tool for validating component props. When a prop type mismatch occurred, it would emit a warning in the browser console. However, React 19 removed the support of this package, so you’d have to re‑introduce it manually. Fortunately, there are more robust options available and one popular choice is Zod.

What is Zod?

Zod is a lightweight, declarative schema language. It lets you describe the shape of an object - its required keys, optional keys, value types, and custom constraints - and then run that description against actual data at runtime. If the data fails to match, Zod throws an informative error that pinpoints exactly which field is wrong and why.

A Zod schema is a description of the shape of a value. Think of it like a blueprint: it says “this should be a string, that should be a number, that optional field should be a boolean, etc.”. The key benefit is that the same schema can be used for both compile‑time type inference and runtime validation.

const UserSchema = z.object({
  id: z.number().int().positive(),
  username: z.string().min(3),
  email: z.string().email(),
  isActive: z.boolean().optional()
});

Prop type validation in React

To automatically validate prop types at runtime with Zod, we must:

Extend React’s rendering logic so that Zod schemas are checked during the JSX compilation step automatically.
Create a Zod schema for a component and attach it directly to the component.

Extend React

In modern React, JSX is transformed into JavaScript at runtime using two core helpers: jsxDEV from react/jsx-dev-runtime (in development) and jsx from react/jsx-runtime (in production). To enable automatic prop type validation, we need to overwrite these helpers so that Zod is automatically called when the component is rendered.

// customReactJSX.js

import * as jsxDevRuntime from 'react/jsx-dev-runtime';
import * as jsxRuntime from 'react/jsx-runtime';
import { z } from 'zod';

const { jsxDEV } = jsxDevRuntime;
const { jsx } = jsxRuntime;

function propValidation(props, schema, componentName) {
  try {
    // Validate the schema
    schema.parse(props);
  } catch(e) {
    // If there is a schema validation error, we extract relevant information
    // from the ZodError and show which validation(s) failed in the console.
    if (e instanceof z.ZodError) {
      e.issues.forEach(issue => {
        const prop = issue.path[0];
        if (prop) {
          // Try to find which component triggered the error
          const regexp = /(at )?propValidation(?!\/)[^.]/;
          let originatedAt;
          const error = new Error();
          if (error?.stack) {
            const stackLines = error.stack.split('\n');
            for (let i = 0, ii = stackLines.length; i < ii; i++) {
              const line = stackLines[i];
              if (regexp.test(line) === true) {
                originatedAt = stackLines[i + 2]?.trim();
                if (originatedAt.startsWith('at')) {
                  originatedAt = originatedAt.slice(3).trim();
                }
                break;
              }
            }
          }

          console.warn(`Prop type validation failed: ${issue.message} for prop "${prop}" supplied to "${componentName}" ${originatedAt ? 'at ' + originatedAt : ''}`, {
            originalError: issue
          });
        }
      });
    } else {
      console.warn("Was not able to validate prop schema");
    }
  }
}

// Development mode
const customJSXDev = (component, props, ...children) => {
  if (component && component.propSchema) {
    propValidation(props, component.propSchema, component.name);
  }

  return jsxDEV(component, props, ...children);
};

// Production mode
const customJSX = (component, props, ...children) => {
  if (component && component.propSchema) {
    propValidation(props, component.propSchema, component.name);
  }

  return jsx(component, props, ...children);
};


jsxDevRuntime.jsxDEV = customJSXDev;
jsxRuntime.jsx = customJSX;

To activate these modified helpers, we must import customReactJSX.js once at the start of our application - for example:

// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './customReactJSX';

Schema definition

Now, in order to validate component props with the modified JSX helpers, we have to create a Zod schema for a component and bind it to the component itself. This mirrors the way you would normally use the prop-types package, but we store the schema in a custom property called propSchema so as not to clash with the existing PropTypes API.

// MyComponent.jsx

import { z } from 'zod';

function MyComponent(props) {
  return <>...</>;
}

MyComponent.propSchema = z.object({
  name: z.string()
});

With these changes in place, props are now automatically validated for each component. Here is an example of <MyComponent /> being used without a value for the name prop being provided:

Final words

Zod makes runtime prop type validation feel almost like a built‑in feature and it gives you the best of both worlds: the type safety and inference benefits of a strong schema language, together with the instant feedback of a traditional prop type checker. Using the approach described in this tutorial, you get automatic validation across the entire component tree without any additional boilerplate when you write a component.

Of course, there are other schema validation libraries out there, and if you prefer AJV, JSON Schema, or any other library, you can integrate them in the same way: attach the schema to your component and hook it into the custom JSX helpers.

Exclude node_modules folder from Time Machine backup

Stefan Kolb — Sat, 30 Mar 2024 15:24:10 +0000

Note: This post was originally published on my blog.

On macOS, TimeMachine is a great tool for backing up your Mac. However, if you work on a lot of JavaScript projects, you probably have a couple of node_modules folders that don't need to be included in your backup. Here is how you can list, add and remove folders from your Time Machine backup.

# List currently excluded node_modules folders
$> sudo mdfind "com_apple_backup_excludeItem = 'com.apple.backupd'" | grep "node_modules"

# Exclude a folder from backup
$> tmutil addexclusion ABSOLUTE_PATH_TO_FOLDER

# Remove folder from the list of excluded folders
$> tmutil removeexclusion ABSOLUTE_PATH_TO_FOLDER

Of course, this also works with any other folder, not only node_modules.

If you don't want to use the terminal, you can also use macOS' system settings: System Settings -> General -> Time Machine -> Options (for macOS Sonoma).

Create an RSS feed for your DEV.to Reading List

Stefan Kolb — Sun, 02 Jul 2023 10:30:34 +0000

DEV.to is a great place to learn and share knowledge about software development. With an active community of developers and technical writers, this website provides a vast range of resources for beginners as well as experienced programmers. One thing that DEV.to offers is a "read later" feature called Reading List. This feature allows users to save any article that they find interesting but do not have time to read right away. Articles that have been added to the Reading List can be accessed at any time, making it more convenient for users to catch up on their reading at a later time.

In this tutorial, we are going to create an RSS feed for the articles that you saved to your DEV.to Reading List. In order to do this, we will generate a token to gain access to the DEV.to API. Then, we will write a Node.js script that loads the article data, creates the RSS feed and saves it to a designated file.

Note: All of the code can be found at this repository on GitHub, including setup instructions and how to run the script to create your personal RSS feed.

Create access token

To access the DEV.to API and load the articles, we need to create an access token. For this, we open the extensions section in our DEV.to profile and scroll to "DEV Community API Keys" at the bottom of the page. We enter a project name in the description field, e.g. "Reading List RSS Feed", and click the "Generate API Key" button. Done.

Warning: API keys are like passwords, which means, keep them safe and do not share them with others.

Create RSS feed

We use JavaScript to write a Node.js file named index.js to load the articles, create an RSS feed and write it to a file. To make things easier, we use the Feed package to create the RSS feed.

Note: The code below has been tested on Node.js version 19.8.1.

import fs from 'fs';
import { Feed } from 'feed';

Before we start, we need to configure a couple of things so that our feed can be properly created:

// Your DEV.to API key
const API_KEY = '';

// The title of the RSS feed, e.g. 'My DEV.to Reading List'
const FEED_TITLE = 'My DEV.to Reading List';

// The description of the RSS feed, e.g. 'A feed for all articles that I saved to my DEV.to Reading List'
const FEED_DESCRIPTION = 'A feed for all articles that I saved to my DEV.to Reading List';

// The RSS feed's ID, e.g. 'https://dev.to/<YOUR_DEV_TO_USERNAME>/
const FEED_ID = ''

// The RSS feed's author information, i.e. your name, email and website
const FEED_AUTHOR = {
  name: '',
  email: '',
  link: ''
};

// The RSS feed's format. Possible values: 'rss2', 'atom1' or 'json1'
const FEED_TYPE = 'rss2';

// The file to which the RSS feed should be written to, e.g. 'feed.xml' or 'feed.json'
const FEED_OUTPUT_FILE = {
  rss2: 'feed.xml',
  atom1: 'atom.xml',
  json1: 'feed.json'
};

// DO NOT EDIT THESE VALUES!

const API_URL_READING_LIST = 'https://dev.to/api/readinglist';

const FEED_FAVICON = 'https://dev-to.s3.us-east-2.amazonaws.com/favicon.ico';
const FEED_OUTPUT_PATH = 'build';

Now that we have all the information we need, there are three things we need to do to create our RSS feed:

Load articles from DEV.to
Create RSS feed in memory
Write RSS feed to file

Load articles from DEV.to

First, we load the articles from our Reading List. For this, we use the native fetch method and parse the JSON response:

const fetchReadingList = () => fetch(
  API_URL_READING_LIST, {
    headers: {
      accept: 'application/vnd.forem.api-v1+json',
      'api-key': API_KEY,
      'content-type': 'application/json',
    }
  }
).then(
  response => {
    if (response.ok) {
      return response.json();
    }

    throw new Error(`Not able to download reading list articles: ${response.statusText} [${response.status}]`);
  }
);

Create RSS feed in memory

Second, with the data received from the API, we create a new Feed object in memory that holds all the information about our RSS feed:

const createRSSFeed = data => {
  const feed = new Feed({
    title: FEED_TITLE,
    description: FEED_DESCRIPTION,
    id: FEED_ID,
    link: FEED_ID,
    favicon: FEED_FAVICON,
    author: FEED_AUTHOR
  });

  data.forEach(item => {
    const feedItem = {
      title: item.article.title,
      id: item.article.url,
      link: item.article.url,
      description: item.article.description,
      date: new Date(item.article.published_at)
    };

    if (item.article.cover_image) {
      feedItem.image = item.article.cover_image;
    } else if (item.article.social_image) {
      feedItem.image = item.article.social_image;
    }

    feed.addItem(feedItem);
  });

  return feed[FEED_TYPE]();
};

Write RSS feed to file

Finally, we are going to write our Feed object to disk. We can choose between three feed types: RSS 2.0, Atom 1.0 and JSON Feed 1.0. The feed type can be set in the configuration (see above):

const writeRSSFeed = feed => {
  const outputPath = `${FEED_OUTPUT_PATH}/${FEED_OUTPUT_FILE[FEED_TYPE]}`;
  try {
    if (fs.existsSync(FEED_OUTPUT_PATH) === false) {
      fs.mkdirSync(FEED_OUTPUT_PATH);
    }
    fs.writeFileSync(outputPath, feed);
  } catch (e) {
    throw new Error(`Was not able to write feed to "${outputPath}":\r\n${e}`);
  };
}

Execute script

Now that we have all our functionality in place, we can call these functions to actually create the RSS feed's file:

fetchReadingList().then(
  data => {
    if (!data || data.length === 0) {
      console.warn('No articles available -> Exiting');
      process.exit(0);
    }

    const rssFeed = createRSSFeed(data);
    writeRSSFeed(rssFeed);
  }
).catch(
  e => {
    console.error(e);
    process.exit(1);
  }
);

We save the Node.js file and call it from the terminal:

$> node index.js

And that's it, our RSS feed is ready and the feed's file is available in the build folder. All we need to do now is copy the generated file to a location that is accessible via the web and add the URL to this file to our favorite RSS feed reader.

We can automate running the Node.js script and copying the output to a folder by using a small Bash script (which is also available in the GitHub repo for this article):

#!/usr/bin/env bash

node index.js
cp ./build/* <PATH_TO_WEB_SERVER_FOLDER>/

Bonus: Automatic updates

Wouldn't it be great if the feed would automatically update, let's say every 60 minutes? Sure, no problem. We add an entry into the configuration for Cron, Anacron, Cronie - or whatever you are using for scheduling tasks - and execute the run.sh Bash script.

# Example for Cron; script runs every 60 minutes
0 * * * * /PATH/TO/run.sh

Final words

RSS feeds are a great way to keep people up-to-date with new content and updates. I hope that with this tutorial, you are able to create your own feed for your DEV.to Reading List. But not only that: You could use the approach in this tutorial to access any API and create an RSS feed from the data it provides.

Did you use this tutorial to generate your own RSS feed? Great, let me know in the comments. If you have any issues or want to suggest an improvement, head over to the GitHub repository's issue tracker.

Fuzzy search for Astro using fzf and Preact

Stefan Kolb — Thu, 25 May 2023 04:34:09 +0000

Static site generators (SSG), like Astro, are great for building static pages. However, they rarely come with site search functionality out of the box. Usually, there is no content management system (CMS) or database that holds the contents and which you could query for search terms.

In this tutorial, we are going to build a simple search for Astro that allows us to query the frontmatter of Markdown/MDX posts. We will create a Preact hook that performs the search. For the UI, we will create a Preact component to let the user enter a search term as well as a Preact component to display the search results in a list.

Note: This post was originally published on my blog

Tools

On the command line, I have been using fzf - in combination with fd - for quite some time now. I use it to search for directories, previous commands in the shell history and other search/filter related tasks. Luckily, there is also FZF for JavaScript, which is an unofficial port of fzf for the browser. We will use this module to power our search.

For the user interactions, we need some HTML and client side JavaScript. To make things easier for us, we will use Astro's Preact integration, which you need to setup, if you haven't done so already.

Install fzf

To add fzf to our Astro project, we need to add it as a dependency in our package.json:

{
  "dependencies": {
    "fzf": "0.5.1"
  }
}

After that, we install it using yarn - or whatever is your package manager of choice:

yarn install

# If you use npm, use this command instead
npm install

`useFuzzySearch` hook

To perform the actual search, we create a hook that handles searching through the frontmatter fields of our Markdown/MDX posts. We memoize the search result to not perform the same search over and over again, but search only, if either the posts, the search term or the frontmatter field in which we want to search changes.

import { useMemo } from 'preact/hooks';
import { Fzf } from 'fzf';

/**
 * Search for search term in post's frontmatter
 *
 * @param {array} posts List of posts to search in
 * @param {string} searchTerm Term to search for
 * @param {string} field Frontmatter item in which to search
 * @param {object} [fzfOptions={ }] Additional options to pass to fzf
 */
function useFuzzySearch(posts, searchTerm, field, fzfOptions = { }) {
  const fzf = useMemo(() => {
    return new Fzf(posts, {
      selector: post => post.frontmatter[field],
      ...fzfOptions
    }, [ posts, field, fzfOptions]);
  });

  const searchResults = useMemo(() => {
    return fzf.find(searchTerm);
  }, [ fzf, searchTerm ]);

  return searchResults;
}

User Interface

For this tutorial, we are going to keep the UI quite simple. We'll need a component with an input element for the user to enter a search term as well as a component to display the actual search results.

Note: I have intentionally left out all CSS stylings, error handling etc. to make it as easy as possible to comprehend this tutorial.

`Search` component

The search component expects - as prop - the posts whose frontmatter are to be searched and the field that should be searched in. Whenever the searchTerm changes, the useFuzzySearch hook is executed to retrieve the search results. If there are search results, these will be passed to the SearchResults component that we will create in the next step.

import { useState } from 'preact/hooks';
import useFuzzySearch from './useFuzzySearch';
import SearchResults from './SearchResults';

const DEFAULT_SEARCH_TERM = '';

function Search(props) {
  // Initialize state variables
  const [ searchTerm, setSearchTerm ] = useState(DEFAULT_SEARCH_TERM);
  const searchResults = useFuzzySearch(
    props.posts,
    searchTerm,
    props.field,
    { fuzzy: false }  // We only search for full word matches. See
                      // https://fzf.netlify.app/docs/latest#api
                      // for available options
  );

  // Called whenever the value of the input field changes.
  function onInput(e) {
    const searchTerm = e?.target?.value;
    if (searchTerm && searchTerm.length > 0) {
      setSearchTerm(searchTerm);
    } else {
      setSearchTerm(DEFAULT_SEARCH_TERM);
    }
  }

  return (
    <div>
      <input
        onInput={ onInput }
        type="text"
      />
      {
        searchResults &&
          <SearchResults
            searchResults={ searchResults }
          />
      }
    </div>
  )
}

`SearchResults` component

The SearchResults component will display a simple list with the posts whose frontmatter field matches the searchTerm.

function SearchResults(props) {
  <div>
    {
      props.noOfSearchResults === 0 &&
        <span>No search results</span>
    }
    {
      props.noOfSearchResults > 0 &&
        props.searchResults.map(result => (
          <p>
            { result.item.frontmatter.title }
          </p>
        ))
    }
  </div>
}

How to use

Now that we have both the logic and UI for our search ready, all we need to do is add our Search component to any Astro page. We add the client:visible directive to hydrate our Preact component once the Search becomes visible to the user.

---
import Search from `Search.jsx`;

const posts = await Astro.glob('@posts/**/*.mdx');
---
<Search
  field="title"
  posts={ posts }
  client:visible
/>

Final words

This is just a basic example on how to add search capabilities to your Astro powered website. As mentioned, I left out all CSS stylings, error handling etc. to make this tutorial easy to understand. However, it should be a good starting point if you want to implement a search on your website yourself.

With the addition of some CSS, the end result might look like the image below. For an interactive demo, go to the archive page of my blog.

DEV Community: Stefan Kolb

React prop type validation with Zod

What is Zod?

Prop type validation in React

Extend React

Schema definition

Final words

Exclude node_modules folder from Time Machine backup

Create an RSS feed for your DEV.to Reading List

Create access token

Create RSS feed

Load articles from DEV.to

Create RSS feed in memory

Write RSS feed to file

Execute script

Bonus: Automatic updates

Final words

Fuzzy search for Astro using fzf and Preact

Tools

Install fzf

useFuzzySearch hook

User Interface

Search component

SearchResults component

How to use

Final words

`useFuzzySearch` hook

`Search` component

`SearchResults` component