TTC
Theo's Typesafe Cultjanusqa

Is it possible to pass a zod schema as a prop?

I have this 
interface Props {
    schema: ZodSchema;
    children: React.ReactNode;
    defaultValues?: unknown;
}
interface Props {
    schema: ZodSchema;
    children: React.ReactNode;
    defaultValues?: unknown;
}
what is the proper way to type the schema prop on the receiving end?
Solution:
owo7 if you want to accept any zod schema then you could do something like ``` import type { ZodSchema } from "zod" type ComponentProps<TSchema extends ZodSchema> = {...
Solution
J
ja_iy•367d ago
owo7 if you want to accept any zod schema then you could do something like 
import type { ZodSchema } from "zod"

type ComponentProps<TSchema extends ZodSchema> = {
    schema: TSchema,
    children: React.ReactNode
}
function Component<TSchema extends ZodSchema>({schema, children}:ComponentProps<TSchema>){
    return <>{children}</>
}
import type { ZodSchema } from "zod"

type ComponentProps<TSchema extends ZodSchema> = {
    schema: TSchema,
    children: React.ReactNode
}
function Component<TSchema extends ZodSchema>({schema, children}:ComponentProps<TSchema>){
    return <>{children}</>
}
But if want to accept a specific schema 
const schemaIn = z.object({
    foo: z.literal('bar')
})

type ComponentProps = {
    schema: typeof schemaIn,
    children: React.ReactNode
}
function Component({schema, children}:ComponentProps){
    return <>{children}</>
}
const schemaIn = z.object({
    foo: z.literal('bar')
})

type ComponentProps = {
    schema: typeof schemaIn,
    children: React.ReactNode
}
function Component({schema, children}:ComponentProps){
    return <>{children}</>
}
J
janusqa•367d ago
Thank you that helps.
J
ja_iy•367d ago
np : D
M
mrnicericee•367d ago
The zod docs covers this, https://zod.dev/ Scroll down until you get to the z.infer. There’s another section that goes a bit more in depth, z.infer, z.input & z.output
GitHub
TypeScript-first schema validation with static type inference
TypeScript-first schema validation with static type inference
J
janusqa•366d ago
@MrNiceRicee (reads docs) thank you.
Want results from more Discord servers?
Add your server
More Posts
Loading state of a `'use server'` componentIs it possible to have a loading state for e.g. a form submission using the new `use server` directiHow do you self host your projects in a vpswithout relying on any cpanel or vercel, i have a vps and i usually move the project using git and Geniune question: php vs server componentsI love nextjs. I hear a lot of comments about nextjs just reinvented php. Can someone clarify thingsHow do you fetch an svg from s3 into an angular app?I tried several things, but each time the svg isn't displayed.What's this errorit was working till yesterday then i added stateDistrict to address model then i started to get thisPrisma find many undefinedHello, In my other projet when i do `prisma.resource.findMany({select: ...})` the type is `{id: strESLint to force @types in dev-dependenciesWe recently had an outage coz someone installed the @types/[package-name] in dependencies, but neverUpdating existing T3 with Supabase Auth from Next AuthBackground: - Launched a T3 app with Next Auth. - Currently got 3000 users. - Launching an app vetRPC + AppRouter without reactQueryhi everyone how can i host trpc on next.js and use trpc on server components without using react queMutate instantly returning success instead of isLoadingI have been working on this endpoint that uploads files do Google Drive. It can upload one or multipNext 13.4 problem with loading state after content is visible & hydration problemHey, I have a small app with Next 13.4 with Shadcn Ui 😍 it's really really good. But I'm also usingis there a way to change/refresh token when data in db changes such as role?Hi, I had a project using NextAuth as my provider and the JWT strategy. When I use the database straRefresh a single React Server ComponetnsI have a dashboard where I want a certain piece of data to update every 10 seconds, what's the best Axios Singleton good or bad idea and how to implement?Hey ppl, I'm asking myself a question. Is it a good idea to have a single instance of axios for an aNext-Auth in server rendered components aka appDir pageshow do we deal with next-auth in appDir? I am genuinely curious, as I am trying to migrate from pageAny Clerk gurus in here? Following the Next.js 13 getting started guide renders blank screenFollowing the getting started with nextjs guide for clerk renders a completely blank screen. I've fo