Formik with React-Select, TypeScript, & Yup

Looking for a great Software Engineer? Or just feel like having a chat? Visit my profile on LinkedIn and say hi! 😃

If you enjoy this article, please hit the clap button 👏🏻 so that someone at FAANG who read it thinks I’m cool and offers me a sweet dev job! 😉

Using Formik together with Yup, TypeScript, and react-select can seem a little daunting at first. I mean, getting different libraries that share concerns to play nice together is often a recipe for hours of Googling how someone else did it, then finding that the implementation doesn’t work on your app… you know the routine. Quite simply, it’s a headache.

That’s ok. It’s why shmucks like me try to put it all together so as to save you time and energy. Hopefully the following code works for you.

In the code above, SelectField is just an exported select tag from styled-components.

export const SelectField = styled.select``;

I’ve kept it in there just so you can see how it all comes together.

Note that we’re using Formik’s useField hook.

Now you can just import it into your Formik form like so:

Hope this helps you out, and happy coding! 😃