Skip to content

Commit

Permalink
Add example of using hooks
Browse files Browse the repository at this point in the history
Adding a basic example using React Hooks in the Overview page.
  • Loading branch information
aneeskodappana committed Oct 13, 2023
1 parent 0f960aa commit 9201d00
Showing 1 changed file with 62 additions and 0 deletions.
62 changes: 62 additions & 0 deletions docs/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,68 @@ const Basic = () => (
</div>
);

export default Basic;
```
## Basic example using Hooks

```jsx

import { useFormik } from 'formik'

const Basic = () => {
const formik = useFormik({
initialValues: {
email: '',
password: ''
},
validate: values => {
const errors = {};
if (!values.email) {
errors.email = 'Required';
} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
) {
errors.email = 'Invalid email address';
}
return errors;
},
onSubmit: (values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}
});

const { values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting } = formik;
return (
<div>
<h1>Anywhere in your app!</h1>
<form onSubmit={handleSubmit}>
<input
type="email"
name="email"
onChange={handleChange}
onBlur={handleBlur}
value={values.email}
/>
{errors.email && touched.email && errors.email}
<input
type="password"
name="password"
onChange={handleChange}
onBlur={handleBlur}
value={values.password}
/>
{errors.password && touched.password && errors.password}
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</form>
</div>
);
}

export default Basic;
```

Expand Down

0 comments on commit 9201d00

Please sign in to comment.