How to create schema to validate react element in zod

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 ?

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.

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>({ })
});

You can use the custom function that is the most suitable for your case:

import { FC, ReactNode } 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: z.custom<ReactNode>()
});

Should be able to use something like this:

const scheme = z.object({
  element: z.custom<React.JSX.Element>(
    e => (e as any)?.$$typeof === Symbol.for("react.element"),
    "value must be a React Element"
  ),
})

scheme.safeParse({ element: <div></div> }).success // true