expose the schema to the mapped component

[scamden]

My use case is to show an asterisk next to required fields in say my TextField component. I'd like to be able to introspect the schema to see if it is optional / nullable or not. (Maybe there's a better answer than that. If so, would love to hear it)

[iway1]

Currently there's no way to do this without passing some prop to the component or adjusting the label which does feel clunky. Could be cool to have an API like this maybe?

function TextField() {
  const {isOptional} = useFieldInfo();
  // ... 
}

This might be a little easier than introspection ( just having the library handle all introspection but making all the relevant field info accessible in the components )

Thoughts?

[scamden]

i really like that. only reason i potentially like introspection is if there are other things in the schema that someone might want to read back.. i can't think of any atm though..

we could add both isOptional and isNullable? (maybe anything that doesn't result in a unique mapping so you can handle the difference in the component? looks like optional, nullable, branded, and default?)

[iway1]

yeah that makes a lot of sense... IDK what else might be useful other than those

[iway1]

Could also add some schema specific stuff, like z.string().min(5, "message") or z.string().array().max(5, "message")

and in the component:

function TextField() {
  const {min, max} = useStringInfo();
  const {length} = useArrayInfo();
}

[iway1]

released in v1.5.0