Back to Recipe Gallery

SweetAlert2 + Formik example

Formik is one of the most popular libraries for building forms with React. Here's how you integrate it with SweetAlert2.

First, get the Formik reference (formikRef) for accessing the form outside. Then, use formikRef inside of preConfirm parameter to validate the form and return its values.

Live demo: https://sweetalert2.github.io/sweetalert2-webpack-demo/

Source code: https://github.com/sweetalert2/sweetalert2-webpack-demo/blob/main/swal2-formik.tsx