next-intl-shadcn-form

This package provides utilities for translating error messages from Shadcn forms using next-intl.

Installation

npm install next-intl-shadcn-form

Usage

In your schema, you can use the serializeTranslationCall or stc (which is the same) function to serialize the translation call. This will allow you to pass the translation key and values to the client, where you can deserialize it back to a translation call and execute it.

import { z } from "zod";
import {
  stc, // or `serializeTranslationCall`
} from "next-intl-shadcn-form";

export const SignUpFormSchema = z.object({
  display_name: z
    .string()
    .min(4, stc("min", { number: 4 }))
    .max(24, stc("max", { number: 24 })),
  email: z.string().email(stc("invalid_email")),
  password: z
    .string()
    .min(8, stc("min", { number: 8 }))
    .max(255, stc("max", { number: 255 })),
});

This how my en.json of next-intl setup looks like:

{
  "Validation": {
    "min": "Must be at least {number} characters",
    "max": "Must be at most {number} characters",
    "invalid_email": "Invalid email address"
  }
}

Then, in your form(FormMessage) component, you can use the deserializeTranslationCall or dtc function to deserialize the serialized translation call and execute it. You can do something like this:

import { useTranslations } from "next-intl";
import {
  deserializeTranslationCall,
  isSerializedTranslationCall,
} from "next-intl-shadcn-form";

const FormMessage = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
  const t = useTranslations("Validation");
  const { error, formMessageId } = useFormField();

  let translatedMessage;
  try {
    const message = error?.message || "";
    const isSerialized = isSerializedTranslationCall(message);
    if (isSerialized) {
      translatedMessage = deserializeTranslationCall(message, t);
    }
  } catch (e) {
    translatedMessage = error?.message || children;
  }
  const body = translatedMessage;

  if (!body) {
    return null;
  }

  return (
    <p
      ref={ref}
      id={formMessageId}
      className={cn(
        "text-sm font-medium text-red-500 dark:text-red-900",
        className
      )}
      {...props}
    >
      {body}
    </p>
  );
});
FormMessage.displayName = "FormMessage";

now your error messages will be translated automatically. 👻

API

serializeTranslationCall(key: string, values?: TranslationValues): string

stc(key: string, values?: TranslationValues): string

Serializes a translation call to a string.

deserializeTranslationCall(serialized: string, t: NextIntlTranslationFunction): string

dtc(serialized: string, t: NextIntlTranslationFunction): string

Deserializes a string back to a translation call and executes it.

isSerializedTranslationCall(str: string): boolean

Checks if a string is a valid serialized translation call.

License

MIT