39 lines
953 B
TypeScript
39 lines
953 B
TypeScript
import { createRoot } from 'react-dom/client'
|
|
import React from 'react'
|
|
import { Form, useForm } from 'react-component-form'
|
|
import type { HandleUseFormCallback } from 'react-component-form'
|
|
|
|
const schema = {
|
|
inputName: {
|
|
type: 'string',
|
|
minLength: 3,
|
|
maxLength: 20
|
|
}
|
|
}
|
|
|
|
export const Example = () => {
|
|
const { errors, handleUseForm } = useForm(schema)
|
|
|
|
const onSubmit: HandleUseFormCallback<typeof schema> = (
|
|
formData,
|
|
formElement
|
|
) => {
|
|
console.log(formData) // { inputName: 'value of the input validated' }
|
|
formElement.reset()
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<Form onSubmit={handleUseForm(onSubmit)}>
|
|
<input type='text' name='inputName' />
|
|
{errors.inputName != null && <p>{errors.inputName[0].message}</p>}
|
|
|
|
<button type='submit'>Submit</button>
|
|
</Form>
|
|
)
|
|
}
|
|
|
|
const container = document.getElementById('root') as HTMLElement
|
|
const root = createRoot(container)
|
|
root.render(<Example />)
|