{"id":46,"date":"2024-12-18T08:02:33","date_gmt":"2024-12-18T08:02:33","guid":{"rendered":"https:\/\/fullstacknotes.netblocs.com\/?p=46"},"modified":"2024-12-18T09:58:38","modified_gmt":"2024-12-18T09:58:38","slug":"must-know-react-libraries-formik-and-yup","status":"publish","type":"post","link":"https:\/\/netblocs.com\/fullstacknotes\/must-know-react-libraries-formik-and-yup\/","title":{"rendered":"Must-Know React Libraries Formik and Yup"},"content":{"rendered":"
\n
\"\"<\/figure><\/div>\n\n\n

What are Formik and Yup?<\/h3>\n\n\n\n
\n\n\n\n

What is Formik?<\/h3>\n\n\n\n

Formik is a library that simplifies the management of form components. It is used to manage user inputs, error messages, and the overall form state (e.g., whether it has been submitted or is valid). Formik automatically tracks and controls the form’s state and validity.<\/p>\n\n\n\n

\n\n\n\n

What is Yup?<\/h3>\n\n\n\n

Yup is a schema validation library for JavaScript. When used with Formik, it can be used to validate user inputs. With Yup, you can define which fields are required, how to validate certain formats, and more.<\/p>\n\n\n\n

\n\n\n\n

Simple Example<\/h3>\n\n\n\n

Below, we will create a simple form using Formik and Yup. The form will have an email<\/code> and a password<\/code> field, and these fields will be subject to validation rules.<\/p>\n\n\n\n

\n\n\n\n

Installing the Required Packages<\/h3>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
npm<\/span> <\/span>install<\/span> <\/span>formik<\/span> <\/span>yup<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\n\n\n\n
Example Code<\/h3>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<\/span>\nimport <\/span>React<\/span> from <\/span>'react'<\/span>;<\/span><\/span>\nimport <\/span>{<\/span> <\/span>Formik<\/span>,<\/span> <\/span>Form<\/span>,<\/span> <\/span>Field<\/span>,<\/span> <\/span>ErrorMessage<\/span> <\/span>}<\/span> from <\/span>'formik'<\/span>;<\/span><\/span>\nimport <\/span>*<\/span> as <\/span>Yup<\/span> from <\/span>'yup'<\/span>;<\/span><\/span>\n<\/span>\nconst<\/span> <\/span>MyForm<\/span> <\/span>=<\/span> <\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>validationSchema<\/span> <\/span>=<\/span> <\/span>Yup<\/span>.<\/span>object<\/span>()<\/span>.<\/span>shape<\/span>(<\/span>{<\/span><\/span>\n    email<\/span>:<\/span> <\/span>Yup<\/span>.<\/span>string<\/span>()<\/span><\/span>\n      <\/span>.<\/span>email<\/span>(<\/span>'Invalid email address'<\/span>)<\/span><\/span>\n      <\/span>.<\/span>required<\/span>(<\/span>'Email is required'<\/span>)<\/span>,<\/span><\/span>\n    password<\/span>:<\/span> <\/span>Yup<\/span>.<\/span>string<\/span>()<\/span><\/span>\n      <\/span>.<\/span>min<\/span>(<\/span>6<\/span>,<\/span> <\/span>'Password must be at least 6 characters'<\/span>)<\/span><\/span>\n      <\/span>.<\/span>required<\/span>(<\/span>'Password is required'<\/span>)<\/span>,<\/span><\/span>\n  <\/span>}<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>Formik<\/span><\/span>\n      <\/span>initialValues<\/span>=<\/span>{{<\/span> email<\/span>:<\/span> <\/span>''<\/span>,<\/span> password<\/span>:<\/span> <\/span>''<\/span> <\/span>}}<\/span><\/span>\n      <\/span>validationSchema<\/span>=<\/span>{<\/span>validationSchema<\/span>}<\/span><\/span>\n      <\/span>onSubmit<\/span>=<\/span>{(<\/span>values<\/span>)<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n        <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'Form values:'<\/span>,<\/span> <\/span>values<\/span>)<\/span>;<\/span><\/span>\n      <\/span>}}<\/span><\/span>\n    <\/span>><\/span><\/span>\n      <\/span>{()<\/span> <\/span>=><\/span> (<\/span><\/span>\n        <\/span><<\/span>Form<\/span>><\/span><\/span>\n          <\/span><<\/span>div<\/span>><\/span><\/span>\n            <\/span><<\/span>label<\/span> <\/span>htmlFor<\/span>=<\/span>"email"<\/span>><\/span>Email:<\/span><\/<\/span>label<\/span>><\/span><\/span>\n            <\/span><<\/span>Field<\/span> <\/span>name<\/span>=<\/span>"email"<\/span> <\/span>type<\/span>=<\/span>"email"<\/span> <\/span>\/><\/span><\/span>\n            <\/span><<\/span>ErrorMessage<\/span> <\/span>name<\/span>=<\/span>"email"<\/span> <\/span>component<\/span>=<\/span>"div"<\/span> <\/span>\/><\/span><\/span>\n          <\/span><\/<\/span>div<\/span>><\/span><\/span>\n<\/span>\n          <\/span><<\/span>div<\/span>><\/span><\/span>\n            <\/span><<\/span>label<\/span> <\/span>htmlFor<\/span>=<\/span>"password"<\/span>><\/span>Password:<\/span><\/<\/span>label<\/span>><\/span><\/span>\n            <\/span><<\/span>Field<\/span> <\/span>name<\/span>=<\/span>"password"<\/span> <\/span>type<\/span>=<\/span>"password"<\/span> <\/span>\/><\/span><\/span>\n            <\/span><<\/span>ErrorMessage<\/span> <\/span>name<\/span>=<\/span>"password"<\/span> <\/span>component<\/span>=<\/span>"div"<\/span> <\/span>\/><\/span><\/span>\n          <\/span><\/<\/span>div<\/span>><\/span><\/span>\n<\/span>\n          <\/span><<\/span>button<\/span> <\/span>type<\/span>=<\/span>"submit"<\/span>><\/span>Submit<\/span><\/<\/span>button<\/span>><\/span><\/span>\n        <\/span><\/<\/span>Form<\/span>><\/span><\/span>\n      )<\/span>}<\/span><\/span>\n    <\/span><\/<\/span>Formik<\/span>><\/span><\/span>\n};<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>default<\/span> <\/span>MyForm<\/span>;<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
Explanation<\/h3>\n\n\n\n
    \n
  1. Importing Formik and Yup<\/strong>: We import the Formik and Yup libraries.<\/li>\n\n\n\n
  2. Validation Schema<\/strong>: We define a validationSchema<\/code> using Yup. For the email<\/code> field, we specify a valid email format, and for the password<\/code> field, we require a minimum of 6 characters.<\/li>\n\n\n\n
  3. Using Formik<\/strong>: We create the form using the Formik component. The initialValues<\/code> prop is used to define the initial values of the form fields.<\/li>\n\n\n\n
  4. Field and ErrorMessage<\/strong>: We define the form fields and error messages. The Field<\/code> component represents the form fields, while the ErrorMessage<\/code> component is used to display validation error messages.<\/li>\n\n\n\n
  5. Submit Handler<\/strong>: When the form is submitted, the onSubmit<\/code> function is triggered and logs the form values to the console.<\/li>\n<\/ol>\n\n\n\n
    This example demonstrates the basics of creating a simple form using Formik and Yup. You can add more fields and extend the validation rules to suit your needs.<\/p>\n","protected":false},"excerpt":{"rendered":"
    What are Formik and Yup? What is Formik? Formik is a library that simplifies the management of form components. It is used to manage user inputs, error messages, and the…<\/p>\n","protected":false},"author":1,"featured_media":48,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,11,21],"tags":[25,15,14,19,26],"class_list":["post-46","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-libraries","category-react","category-react-libraries","tag-formik","tag-libraries","tag-react","tag-react-libraries","tag-yup"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/posts\/46","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/comments?post=46"}],"version-history":[{"count":3,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/posts\/46\/revisions"}],"predecessor-version":[{"id":108,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/posts\/46\/revisions\/108"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/media\/48"}],"wp:attachment":[{"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/media?parent=46"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/categories?post=46"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/tags?post=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}