Parsing URL Search Parameters with Zod 💎
Tags: react, typescript, zod
Published: 2023-09-07 12:00:51

## Introduction

In today's digital age, the usage of URLs as a medium to share the state of the application is growing rapidly. This has become especially popular in web applications, where the user's actions can be replicated by simply sharing a URL. This article will introduce you to an efficient way of parsing URL search parameters with the use of [Zod](https://zod.dev) library and demonstrate how they can be used in a [React](https://react.dev) form.

## What is Zod?

Zod is a schema declaration and validation library for JavaScript and TypeScript. It can be used to create a "blueprint" or "schema" for JavaScript objects, ensuring that the data you're working with meets certain criteria before it's processed by your application. With the use of Zod, you can parse URL search parameters accurately and efficiently, and validate the data before it enters your system.

## Parsing Parameters with Zod

Before we jump into parsing parameters with Zod, let's first install the library using npm. Open your terminal and navigate to your project directory. Run the following command to install Zod:

```
npm install zod
```

Now, let's dive into the code example to understand how to parse URL parameters using Zod.

The first part of the code defines a constant object named `allowedValues`, which consists of two properties, `periods` and `posts`. These properties are an array of strings that represent the allowed values for the corresponding search parameters.

```ts
const allowedValues = {  
  periods: ['1', '3', '6', '12'],  
  posts: ['10', '25', '50'],  
} as const;  
```

Next, we define a schema `ParamsSchema` using Zod. This schema reflects the structure of our search parameters. We expect three parameters: `tags`, `period`, and `posts`. The `tags` parameter is expected to be a string, while `period` and `posts` parameters are expected to be one of the allowed values defined earlier. If these parameters are not present in the URL, we provide default values using the `catch` method.

```ts
import { z } from "zod";

const ParamsSchema = z.object({  
  tags: z.string().catch(''),  
  period: z.enum(allowedValues.periods).catch(allowedValues.periods[0]),  
  posts: z.enum(allowedValues.posts).catch(allowedValues.posts[0]),  
});
```

Finally, we create an instance of `URLSearchParams` with the current URL's search string and parse the search parameters using our schema.

```ts
const searchParams = new URLSearchParams(window.location.search);  
  
const params = ParamsSchema.parse({  
  tags: searchParams.get('tags'),  
  period: searchParams.get('period'),  
  posts: searchParams.get('posts'),  
});  
```

This way, Zod helps us parse the search parameters from the URL and validates them against the defined schema. If the validation fails, Zod throws an error, which can be caught and handled accordingly.

## Using Parsed Parameters in Form

After parsing URL parameters with Zod and validating them, you can use these values to set the initial state in your React components, for example, to set initial filters in a form.

Consider the following code example. Here, we have a React component named `App`, which consists of a form with two select inputs and a text input. These inputs correspond to the `period`, `posts`, and `tags` parameters we parsed from the URL.

```tsx
export const App = () => {  
  return (  
    <form>  
      <input  
        type="text"  
        name="tags"  
        defaultValue={params.tags}  
        placeholder="javascript, react"  
      />  
      <select name="period" defaultValue={params.period}>  
        {allowedValues.periods.map((period, index) => (  
          <option key={`period-${index}`} value={period}>  
            {period}  
          </option>  
        ))}  
      </select>  
      <select name="posts" defaultValue={params.posts}>  
        {allowedValues.posts.map((post, index) => (  
          <option key={`post-${index}`} value={post}>  
            {post}  
          </option>  
        ))}  
      </select>  
      <button>Submit</button>  
    </form>  
  );  
};  
```

In this code, we are setting the `defaultValue` attribute of each input to the corresponding parameter value from the URL. This way, when a user accesses the page with specific URL parameters, the form fields will be pre-filled with those values.

The `map` function is used to generate the options for the select inputs based on the `allowedValues` we defined earlier. Each option's value is set to the corresponding value from the `allowedValues` array, and the text inside the option tag is also set to the same value.

This approach allows you to create a seamless user experience, where the state of the form is linked with the URL parameters. This can be particularly useful for sharing links with pre-set filters or settings.

## Summary

In conclusion, parsing and syncing URL search parameters with React state is a powerful way of enhancing user experience, making your application more interactive, and replicating a specific state of the app through a simple URL.

You can check out the full code for this tutorial below:

{% stackblitz stackblitz-starters-9aecm4 %}

I hope you found this article helpful. If you have any questions or thoughts about this topic, please feel free to leave a comment below or contact me on [Twitter](https://twitter.com/rgolawski). I'd love to hear your feedback.

Thanks for reading! 👋