Zod Messages

Zod Messages is a TypeScript project that provides a set of utilities for handling validation messages using the Zod library. This library allows you to easily validate your data and display error messages in a readable form within your components.

Features

- Easy Integration: Seamlessly integrates with the Zod validation library.
- Readable Messages: Transforms Zod error results into user-friendly validation messages.
- TypeScript Support: Fully typed and compatible with TypeScript.
- Flexible: Can be used in various JavaScript frameworks and environments.

⚠️ React Dependency useValidator uses React hooks under the hood. Make sure react is installed as a dependency in your project:

Installation

Use the package manager npm to install Zod Messages.

``bash
npm install zod-messages
`

Usage with hooks

`typescript
import { useValidator } from 'zod-messages';

// your code here
`

$3


`typescript
// model.ts
export interface User {
name: string;
email: string;
age: number;
address : {
street: string;
city: string;
}
}
`

`typescript
// schema.ts
import { z } from 'zod';


export const UserValidationSchema = z.object({
name: z.string().min(3),
email: z.string().email({ message: 'Invalid email address' }),
age: z.number().min(15, { message: 'Age must be at least 15' }),
address: addressSchema,
});

export const AddressValidationSchema = z.object({
street: z.string().min(3),
city: z.string().min(3),
});
`

`tsx
// index.tsx

import { useValidator } from 'zod-messages';
import { ErrorMessage } from '@your-components/errorMessage/index';

export const YourComponent = () => {

const { validate, validationMessages } = useValidator(UserValidationSchema);

const handleSubmit = (data: User) => {
const result = validate(data);
if (result.success) {
// do something
}
}

return (



//Age must be at least 15







Submit

);
}
`

$3

`typescript
//validation.ts

import { ValidationResult } from "./useValidator";

export const isUserValid = (data?: T): ValidationResult => {
const result = UserValidationSchema.safeParse(data ?? initUserData);

return {
isInvalid: !result.success,
validationMessages: result.success ? {} : formatErrorMessages(result.error),
}
};

//result
// {
// isInvalid: false,
// validationMessages: {
// name: 'Name is required',
// email: 'Invalid email address',
// age: 'Age must be at least 15',
// address: {
// street: 'Street is required',
// city: undefined
// }
// }
// }

`

$3

`typescript
import { z } from 'zod';


export const UserValidationSchema = z.object({
name: z.string().min(3),
email: z.string().email({ message: 'Invalid email address' }),
address: addressSchema,
})
.superRefine((data, ctx) => {
if (data.address.city === 'New York') {
return ctx.addIssue({
code: z.ZodIssueCode.custom,
path: ['address', 'city'],
message: 'City cannot be New York',
});
}
})
`

$3

`typescript
import {z} from 'zod';
import {eGlobalErrorMessage} from "./useValidator";


export const UserValidationSchema = z.object({
name: z.string().min(3),
email: z.string().email({message: 'Invalid email address'}),
})
.superRefine((data, ctx) => {
const diacritics = /[\u0300-\u036f]/g;

if (diacritics.test(data.name)) {
return ctx.addIssue({
code: z.ZodIssueCode.custom,
path: [eGlobalErrorMessage.globalErrorMessage],
message: 'Name cannot contain diacritics',
});
}
})
`

`tsx
// index.tsx
//...
return (





);
//...


``

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

This project is licensed under the ISC License - see the LICENSE file for details.