https://github.com/mrbr/antd-zod

Antd Zod validation
https://github.com/mrbr/antd-zod

Last synced: 1 day ago
JSON representation

Antd Zod validation

• Host: GitHub
• URL: https://github.com/mrbr/antd-zod
• Owner: MrBr
• License: mit
• Created: 2023-10-15T08:46:08.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-01-08T21:01:38.000Z (8 days ago)
• Last Synced: 2025-01-15T12:07:54.997Z (1 day ago)
• Language: TypeScript
• Size: 2.17 MB
• Stars: 35
• Watchers: 2
• Forks: 6
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Antd Zod validation

The aim of this library is to enable seamless integration of Zod validation with Antd form fields.

## Installation

```

npm install antd-zod

```

Link to npm package [antd-zod](https://npmjs.com/package/antd-zod).

### Older version

- For Antd@^4.0.0 use antd-zod@^4.0.0

## Usage

```jsx

import z from 'zod';

import { Form, Button, Input, InputNumber } from 'antd';

import { createSchemaFieldRule } from 'antd-zod';

// Create zod schema - base schema MUST be an object

const CustomFormValidationSchema = z.object({

  fieldString: z.string(),

  fieldNumber: z.number(),

});

// Create universal rule for Form.Item rules prop for EVERY schema field

const rule = createSchemaFieldRule(CustomFormValidationSchema);

// Set rule to Form.Item

const SimpleForm = () => {

    return (

        

            

                

            

            

                

            

            Submit

        

    );

};

```

## Examples

All examples are in Storybook stories

- Basic examples - https://github.com/MrBr/antd-zod/blob/main/stories/basic.stories.tsx

- Refined examples - https://github.com/MrBr/antd-zod/blob/main/stories/refined.stories.tsx

To start storybook locally, install depenedencies and run `npm run storybook`.

## Specifications

Antd Form.Item (rc-field-form) has a certain validation lifecycle which works the best with Form.Item rules. In order to respect that behaviour, `antd-zod` provides a way to create a generic rule that will validate all schema properties and refinements on a field level.

- Base schema for Form data must be an object

- Object may have refinements on a root level

- Object may have nested object children

- Object children may have their own refinements