react-fieldz
react-fieldz
is a library built off of fieldz
.
It provides the useFieldz
react hook, which simply wraps fieldz
in React's useState.
Please see fieldz
for more detail on the api.
Example Usage
const fieldProperties = {
firstName: {
init: "",
validate: nameValidator
},
customField: {
validate: (val: string) => {
if (val !== "hello") {
return [new Error("value must be hello!")]
}
return []
},
init: "this is my init value"
}
}
const camelToTitle = camelCase => camelCase
.replace(/([A-Z])/g, match => ` ${match}`)
.replace(/^./g, match => match.toUpperCase())
.trim()
const Form = () => {
const [{actions, fieldsState}, setFieldsState] = useFieldz(fieldProperties)
const {setValue, setValues, setTouched, resetField, resetFields } = actions
return (
<form>
{Object.entries(fieldsState)
.map(([fieldName, {errors, value, touched, pristine}]) => (
<div key={fieldName}>
{(touched && errors.length) ?
<span className="input-error">
{errors.map(err => <div>{err.toString()}</div>)}
</span> : ""
}
<label htmlFor={fieldName}>{camelToTitle(fieldName)}</label>
<input
name={fieldName}
id={fieldName}
value={value}
aria-label={fieldName}
onChange={e => setFieldsState(setValue(fieldName, e.target.value))}
onBlur={_ => setFieldsState(setTouched(fieldName))}
/>
</div>
))
}
</form>
)
}