DEV Community: ☀️

Fonts in Next.js 13 + Chakra-UI

☀️ — Thu, 02 Feb 2023 09:08:49 +0000

Next.js 13 introduces a brand new font system which downloads the fonts at build time and serves them static⚡️

How to use @next/font combined with chakra-ui

Create a theme file for chakra-ui:

// theme.ts
import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({});

export default theme;

Then import your font as the Next docs describe, I'm going for Averia Serif Libre.

// theme.ts
import { extendTheme } from '@chakra-ui/react';
import { Averia_Serif_Libre } from '@next/font/google';

// Import the weights and subsets, add any other config here as well
const nextFont = Averia_Serif_Libre({
    weight: ['400'],
    subsets: ['latin'],
});

const theme = extendTheme({
    // Set the fonts like this
    fonts: {
        body: nextFont.style.fontFamily,
        heading: nextFont.style.fontFamily,
    },
});


export default theme;

React Hook Form: Multiple Yup validation schemas

☀️ — Thu, 05 Jan 2023 09:25:26 +0000

TL;DR Codesandbox to see it in action

Introduction

In this tutorial I will show you how I managed to use multiple Yup validation schemas with react-hook-form.

My use case I had a form which I wanted to save (with all fields required) but also to save as draft (with only one required field)

Step 1: Implement default schema for save

import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";

const schema = yup.object().shape({
  firstName: yup.string().required(),
  lastName: yup.string().required()
});

/*...*/

const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm<FormData>({
    resolver: yupResolver(schema), // default schema
});

const onSubmit = handleSubmit((_data) => {
    alert("schema valid!");
});

<form onSubmit={onSubmit}>
    <label>First Name</label>
    <input {...register("firstName")} />

    <label>Last Name</label>
    <input {...register("lastName")} />

    <button type="submit">
        Save
    </button>
</form>

Step 2: Implement second schema for save as draft

const draftSchema = yup.object().shape({
  firstName: yup.string().required(),
  lastName: yup.string() // lastName is optional for draft
});

/*...*/

const saveDraft = async () => {
// todo
}

<form onSubmit={onSubmit}>
{/*...*/}

    <button type="button" onClick={saveDraft}>
        Save as draft
    </button>
</form

Step 3: saveDraft function

We're going to manually use the yup.validate() to validate the draftSchema when clicking save as draft. And setting the error into react-hook-form.

/*...*/
const {
  register,
  handleSubmit,
  getValues, // to get current form data
  setError, // to set error from yup.validate()
} = useForm<FormData>({
  resolver: yupResolver(schema),
});

const saveDraft = async () => {
  const data = getValues();

  // try catch block for yup validate function. abortEarly: false so it returns all errors on our form.
  try {
    await draftSchema.validate(data, { abortEarly: false });
    // if passes, data is valid
    alert("draft schema valid!");
  } catch (error) {
    // loop over all errors and setError to use them in react-hook-form
    error.inner?.map((inner, index) => {
      const { type, path, errors } = inner;
      return setError(path, { type, message: errors[index] });
    });
  }
};

/*...*/

Conclusion

And that's it! Not the most beautiful solution, but the only one I've got working.

I hope you've found this article useful, please let me know how you used this or another solution in the comments :)

React Hook Form: Dynamic Yup validation schema

☀️ — Thu, 03 Mar 2022 14:41:23 +0000

TL;DR Codesandbox to see it in action

Introduction

In this tutorial I will show you how to create a dynamic Yup validation schema to use with React Hook Form.

In my use case I had to create this because the form in our app is generated in the admin environment and get's delivered to the front end via an API.

Show the custom fields
Setting up React Hook Form
Creating our dynamic schema

Step 1: Show the custom fields

The data for our custom fields will most likely come from an API, but for this example I'll add it to a separate file.

export const customFields = [
  {
    name: "firstName", // Name should be unique and is our identifier
    label: "Firstname",
    placeholder: "Tommy",
    type: "text" // Type is defined by ourselves, based on this we will add validations
  },
  {
    name: "lastName",
    label: "Lastname",
    placeholder: "Wiseau",
    type: "text"
  },
  {
    name: "website",
    label: "Portfolio",
    placeholder: "https://...",
    type: "url"
  }
];

Now that we have our data in place, we can show the fields by looping through them in our React app.
As you can see I import the data for our separate file at line 2.

import React from "react";
import { customFields } from "./customFieldData";

export default function App() {
  return (
    <div className="App">
      <form className="form">
        {customFields.map((customField) => {
          return (
            <div key={customField.name}>
               <label>{customField.label}</label>
               <input
                 placeholder={customField.placeholder}
                 name={customField.name}
               />
            </div>
          );
        })}
      </form>
    </div>
  );
}

Step 2: Setting up React Hook Form

We need to npm install and import our dependencies

import { useForm } from "react-hook-form";

And setup our useForm

const {
    formState: { errors },
    register
  } = useForm({
    mode: "onTouched"
  });

And adjust our inputs a bit so they are registered to react hook form. I've also added an error message.

<input
  placeholder={customField.placeholder}
  {...register(customField.name)}
/>
<span>{errors[customField.name]?.message}</span>

Step 3: Creating our dynamic schema

First we create a function to extend our custom field data with Yup validations.
This logic will be based on the type of the field, in this case we'll validate the URL fields.

// Extend customFields with validation based on type
// As an example we only extend the URL type fields
const useCustomFieldsExtendValidation = (customFields) => {
  return customFields.map((customField) => {
    switch (customField.type) {
      case "url":
        return {
          ...customField,
          validationType: "string",
          validations: [
            {
              type: "trim",
              params: []
            },
            {
              type: "url",
              params: ["Not a valid URL"]
            }
          ]
        };
      default:
        return customField;
    }
  });
};

Now that we can extend our form data, we'll create a function to actually create the Yup schema based on this data.
Much thanks to vijayranghar

// This function creates the dynamic Yup schema
  const useCustomFieldsDynamicSchema = (schema, config) => {
    const { name, validationType, validations = [] } = config;
    if (!yup[validationType]) {
      return schema;
    }
    let validator = yup[validationType]();
    validations.forEach((validation) => {
      const { params, type } = validation;
      if (!validator[type]) {
        return;
      }
      validator = validator[type](...params);
    });
    schema[name] = validator;
    return schema;
  };

Now that we have our functions ready, we can use them!

// First extend the data with our validations
const dynamicFormData = useCustomFieldsExtendValidation(customFields);


// Create schema based on added validations
const customFieldsSchema = dynamicFormData.reduce(
  useCustomFieldsDynamicSchema,
  {}
);

// Create Yup schema
const dynamicValidationSchema = yup.object().shape(customFieldsSchema);

And finally we can use this dynamicValidationSchema in our useForm

const {
    formState: { errors },
    register
  } = useForm({
    defaultValues: {},
    resolver: yupResolver(dynamicValidationSchema), // 🎉 Here we use our dynamic schema
    mode: "onTouched"
  });

DEV Community: ☀️

Fonts in Next.js 13 + Chakra-UI

How to use @next/font combined with chakra-ui

React Hook Form: Multiple Yup validation schemas

Introduction

Step 1: Implement default schema for save

Step 2: Implement second schema for save as draft

Step 3: saveDraft function

Conclusion

React Hook Form: Dynamic Yup validation schema

Introduction

Table of contents

Step 1: Show the custom fields

Step 2: Setting up React Hook Form

Step 3: Creating our dynamic schema