https://github.com/johnrom/formik-typed
A Wrapper for Formik that exposes Strongly Typed Fields
https://github.com/johnrom/formik-typed
Last synced: 2 months ago
JSON representation
A Wrapper for Formik that exposes Strongly Typed Fields
- Host: GitHub
- URL: https://github.com/johnrom/formik-typed
- Owner: johnrom
- License: mit
- Created: 2019-03-12T21:43:33.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-02-13T02:11:00.000Z (over 1 year ago)
- Last Synced: 2025-03-11T22:23:45.453Z (over 1 year ago)
- Language: TypeScript
- Size: 916 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
> Note: Does not work in IE11 or anywhere Proxy is not supported! I'm not actively maintaining this project as I need IE11 support at the moment.
> This is based on Formik v1, so there are no examples with hooks.
A proof of concept. Making forms less verbose in [React](https://github.com/facebook/react) shouldn't cause you to lose your [TypeScript](https://typescriptlang.org) typings. This package provides a wrapper for [Formik](https://github.com/jaredpalmer/formik/) that will strongly type your field and auto-populate its name based on your Formik `FormValues` shape.
Status: **pre-Alpha**
Before use, check out the [Formik Docs](https://jaredpalmer.com/formik/docs/overview).
## In-browser Playgrounds
[CodeSandbox](https://codesandbox.io/s/formik-typed-fzge9)
## Examples
See all examples here: https://github.com/johnrom/formik-typed/tree/master/examples
Or check out the [CodeSandbox](https://codesandbox.io/s/formik-typed-fzge9).
### Using Fields
```tsx
export interface SignupFormValues {
title: string;
name: string;
age?: number;
emergencyContacts: EmergencyContact[];
}
export const SignupForm: React.FC<
TypedFormikProps
> = props => {
const TitleField = props.fields.title._getField();
const NameField = props.fields.name._getField();
return (
Signup
{/* Writing a Field definition inline is dead simple. */}
{titleProps => (
<>
Title
Select a Title (optional)
Mr.
Mrs.
>
)}
{nameProps => (
<>
Name
>
)}
{/* Passing your own Custom Component to a Field definition is also pretty easy.
*/}
{/* For Custom Components that need to manage multiple fields, you can pass the proxy directly */}
Submit
);
};
```
---
Shoutout to Jared Palmer for his work on Formik.
---
MIT License.
---