1
1
mirror of https://github.com/theoludwig/react-component-form.git synced 2024-07-17 07:30:13 +02:00
react-component-form/example/components/FormExample.tsx
Divlo 5bb73df804
fix: rename value to message in HandleUseFormCallback return type
BREAKING CHANGE: Migrate your onSubmit handlers to return a `message` instead of `value`
2023-04-02 22:08:32 +02:00

71 lines
1.8 KiB
TypeScript

import { Form, useForm } from 'react-component-form'
import type { HandleUseFormCallback } from 'react-component-form'
import useTranslation from 'next-translate/useTranslation'
import { Input } from './design/Input'
import { Button } from './design/Button'
import { useFormTranslation } from '../hooks/useFormTranslation'
import { userSchema } from '../models/User'
import { FormState } from './design/FormState'
const simulateServerRequest = async (ms: number): Promise<void> => {
return await new Promise((resolve) => {
setTimeout(resolve, ms)
})
}
export const FormExample: React.FC = () => {
const { handleUseForm, errors, fetchState, message } = useForm(userSchema)
const { getFirstErrorTranslation } = useFormTranslation()
const { t } = useTranslation()
const onSubmit: HandleUseFormCallback<typeof userSchema> = async (
formData,
formElement
) => {
await simulateServerRequest(2_000)
console.log('onSubmit:', formData)
formElement.reset()
return {
type: 'success',
message: 'common:success-message'
}
}
return (
<section>
<Form
className='mt-6 w-[90%] max-w-xs'
noValidate
onSubmit={handleUseForm(onSubmit)}
>
<Input
type='text'
placeholder={t('common:name')}
name='name'
label={t('common:name')}
error={getFirstErrorTranslation(errors.name)}
/>
<Input
type='text'
placeholder='Email'
name='email'
label='Email'
error={getFirstErrorTranslation(errors.email)}
/>
<Button className='mt-6 w-full' type='submit' data-cy='submit'>
Submit
</Button>
</Form>
<FormState
id='message'
state={fetchState}
message={message != null ? t(message) : undefined}
/>
</section>
)
}