https://github.com/katt/typed-form
typesafe formik example
https://github.com/katt/typed-form
Last synced: about 1 year ago
JSON representation
typesafe formik example
- Host: GitHub
- URL: https://github.com/katt/typed-form
- Owner: KATT
- Created: 2021-01-01T18:27:32.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-01-01T20:53:05.000Z (over 5 years ago)
- Last Synced: 2024-10-05T16:42:24.651Z (over 1 year ago)
- Language: TypeScript
- Size: 158 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Typed-safe Formik `` etc example
Example of using TypeScript 4.1 [Template Literal Types](https://devblogs.microsoft.com/typescript/announcing-typescript-4-1/#template-literal-types) to give us a type safe usage of [Formik](https://formik.org/) ``s' `name`-attribute (& `useField` & ``).
> (Does not cover array fields)
## How the form component uses it
```tsx
// Set the initial values
const initialValues = {
name: "",
social: {
facebook: "",
twitter: "",
},
};
// Create type safe helper components
const { Field, ErrorMessage, useField } = typedFormik({
initialValues,
});
// in component:
```
### View code
- [`pages/index.tsx`](./pages/index.tsx)
- [`utils/typedFormik.tsx`](./utils/typedFormik.tsx)
- [`utils/types.ts`](./utils/types.ts)
### Play with it
```bash
git clone git@github.com:KATT/typed-form.git cd typed-form && yarn && yarn dev
```
---
Created by [@alexdotjs](https://twitter.com/alexdotjs). Credits to [Craig](https://twitter.com/phenomnominal) who wrote [this article](https://dev.to/phenomnominal/i-need-to-learn-about-typescript-template-literal-types-51po).