Question 73534 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to create schema to validate react element in zod – Reactjs

In this scenario, i want to take only a react component as input.

import { FC, ReactElement } from 'react';
import { NextLink } from '../links/NextLink';
import { z } from 'zod';
export const BlogCard2PropsSchema = z.object({
  link: z.string(),
  title: z.string(),

  category: z.string(),
  description: z.string(),
  cardTop: ReactElement
});

Is there any way to type the cardTop Property Properly, without any ?

Tags:

2

Answers


  1. 0 
    import { FC } from 'react';

type ReactComponent<P = {}> = FC<P> & {
  defaultProps?: Partial<P>;
}

    This ReactComponent type defines a generic type parameter P that can be used to define the props of the component.

    import { z } from 'zod';
import { ReactComponent } from './types';

export const BlogCard2PropsSchema = z.object({
  link: z.string(),
  title: z.string(),

  category: z.string(),
  description: z.string(),
  cardTop: z.function<ReactComponent>({ })
});
    Login or Signup to reply.
  2. 0

    As far as I can tell, zod is for data. It works well for typing Data Models, such as frontend models like a user object or a backend object like a database table (seems to work well with kysley).

    As a result, I have determined its far easier to use pure TS/React typing on the View Layer, where zod seems quite deficient and too verbose for the application.

    Zod might be designed this way intentionally, but I couldn’t and article on it. But fundamentally Data should be separate from Views, data typing is strong, view typing is pretty simple (e.g. ReactNode) and really the type hierarchy (strongeness) is defined in the View Layout for react nodes.

    type AppPropsType = {
  page: React.ReactNode,
  name: string,
}

    It is much cleaner and strong enough typing for the View Layer. Data layer will benefit from zod.

    Disclaimer: Theoretical, but code makes sense. The only real deficiency is that when you have non-ReactNode types, like string, you inherently want to use z.string… but if you change it to a z.object you can no longer user ReactNode in it. SO the deficiency goes both ways.

    Zod should get something equivalent to ReactNode, perhaps that works equally well for Angular or perhaps segregated.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search