AutoForm is a React part that instantly develops a @shadcn/ ui kind based upon a zod schema.
Just how to utilize it:
1. Import the essential sources.
import AutoForm, {AutoFormSubmit} from "./ components/ui/auto-form";
. import * as z from "zod";
2. Specify your kind schema making use of zod.
const formSchema = z.object( {
.
username: z
.
.
string( {
. required_error:" Username is called for.",
.})
.// You can make use of zod's integrated recognition as regular
. minutes( 2, {
. message:" Username should go to the very least 2 personalities.",
.
}
),
.
password: z
.
string( {
. required_error: "Password is called for. ",
.
})
.// Utilize the "define" technique to establish the tag
.
// If no tag is established, the area name will certainly be made use of
.// as well as un-camel-cased
. define(" Your safe password ")
. minutes( 8,
{
.
message: "Password should go to the very least 8 personalities.",
.} ),
. favouriteNumber: z.coerce// When making use of numbers as well as days, you need to make use of
persuade
. number( {
. invalid_type_error:" Favorite number should be a number. "
,
.
})
. minutes( 1, {
.
message:" Favorite
number should go to the very least 1.
",
.})
.
max( 10, {
. message:" Favorite number should go to a lot of 10.",
.
}
)
. default( 5
)
// You can establish a default worth
.
optional(),
.
acceptTerms: z
. boolean( )
.
define (" Approve terms as well as
problems.
")
. improve(( worth )= > worth, {
. message:" You need to approve the conditions.",
. course:["acceptTerms"]
,
.}),
.
// Day will certainly reveal a day picker
.
birthday celebration: z.coerce.date() optional(),
. sendMeMails: z.boolean(). optional(),
.
// Enum will certainly reveal a pick
.
shade: z.enum((*
)
),
.// Produce sub-objects to develop accordion areas
. address: z.object(
{
. road: z.string(),
. city: z.string(),
. zip: z.string(),
.
}
<),
.
});["red", "green", "blue"] 3. Construct your @shadcn/ ui kind
.
feature Application() {
.
return(
. < AutoForm
.// Pass the schema to the kind
.
formSchema= {formSchema}
.// You can include extra config for every area
.
// to personalize the UI
.
fieldConfig= {{
. password: {
.// Utilize" inputProps" to pass props to the input part
.
// You can make use of any type of props that the part approves
.
inputProps: {
. kind: "password",
. placeholder:" • • • • • • • •"
,
.
},
.
},
. favouriteNumber: {
.// Establish a" summary" that will certainly be revealed listed below
the area
. summary:" Your preferred number in between 1 as well as 10.",
.
}
,
. acceptTerms: {
. inputProps: {
.
called for: real,
.},
.
// You can make use of JSX in the summary
.
summary:(
. < >
.
> {
.
>
e.preventDefault(
);
. sharp( "Terms clicked.
<")>
;
<
.
}}
.
>
. conditions
.
.
.
.),
.
},
. birthday celebration: {
. summary: "We require your birthday celebration to send you a present.",
.
},
.
sendMeMails: {
.
//
Booleans make use of a checkbox by default, you can make use of a button rather
. fieldType:" button",
.},
.
}}
. >
. {
/ *
. Come on a AutoFormSubmit or
a switch with kind= "send".
Conversely, you can not pass a send>switch
. to develop auto-saving types and so on
.
*
/
}
. < AutoFormSubmit > Send out currently
. {/ *
. All youngsters passed to the kind will certainly be made listed below the kind.
.
<*/}
. < p className=">
text-gray-500 text-sm"
>
. By sending this kind, you consent to our {""}
. < a href=" #" className=" text-primary underscore">
>
. conditions
.
.
.
.
.);
.}
Sneak Peek:
Download And Install Information:
Writer
: vantezzen Online Demonstration
: Sight The Demonstration Download And Install Web Link
: Download And Install The Resource Code Authorities Internet Site
: https://github.com/vantezzen/auto-form Certificate
: MIT
