Bilinmesi Gereken React Kütüphaneleri - Formik ve Yup

Formik ve Yup Nedir?

Formik Nedir?

Formik, form bileşenlerinin yönetimini kolaylaştıran bir kütüphanedir. Kullanıcı girdilerini, hata mesajlarını ve formun genel durumunu (örneğin, gönderildi mi, geçerli mi) yönetmek için kullanılır. Formik, formun durumunu ve geçerliliğini otomatik olarak izler ve kontrol eder.

Yup Nedir?

Yup, JavaScript için bir şema doğrulama kütüphanesidir. Formik ile birlikte kullanıldığında, kullanıcı girdilerini doğrulamak için kullanılabilir. Yup ile formda hangi alanların zorunlu olduğunu, belirli formatları nasıl doğrulayacağınızı ve daha fazlasını tanımlayabilirsiniz.

Basit Örnek

Aşağıda, Formik ve Yup kullanarak basit bir form oluşturacağız. Formda bir email ve password alanı olacak ve bu alanlar doğrulama kurallarına tabi olacak.

Gerekli Paketlerin Kurulumu

npm install formik yup

Örnek Kod

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const MyForm = () => {
  const validationSchema = Yup.object().shape({
    email: Yup.string()
      .email('Geçersiz e-posta adresi')
      .required('E-posta zorunludur'),
    password: Yup.string()
      .min(6, 'Şifre en az 6 karakter olmalıdır')
      .required('Şifre zorunludur'),
  });

  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        console.log('Form values:', values);
      }}
    >
      {() => (
        <Form>
          <div>
            <label htmlFor="email">E-posta:</label>
            <Field name="email" type="email" />
            <ErrorMessage name="email" component="div" />
          </div>

          <div>
            <label htmlFor="password">Şifre:</label>
            <Field name="password" type="password" />
            <ErrorMessage name="password" component="div" />
          </div>

          <button type="submit">Gönder</button>
        </Form>
      )}
    </Formik>
};

export default MyForm;

Açıklama

1. Formik ve Yup İçe Aktarımı: Formik ve Yup kütüphanelerini içe aktarıyoruz.
2. Doğrulama Şeması: Yup kullanarak validationSchema tanımlıyoruz. email alanı için geçerli bir e-posta formatı ve password alanı için minimum 6 karakter gereksinimi belirtiyoruz.
3. Formik Kullanımı: Formik bileşenini kullanarak formu oluşturuyoruz. initialValues ile form alanlarının başlangıç değerlerini belirtiyoruz.
4. Field ve ErrorMessage: Form alanlarını ve hata mesajlarını tanımlıyoruz. Field bileşeni, form alanlarını temsil ederken, ErrorMessage hata mesajlarını göstermek için kullanılır.
5. Gönderim İşlemi: Form gönderildiğinde, onSubmit fonksiyonu çalışır ve form verilerini konsola yazdırır.

Bu örnek, Formik ve Yup kullanarak basit bir form oluşturmanın temelini göstermektedir. İhtiyaçlarınıza göre daha fazla alan ekleyebilir ve doğrulama kurallarını genişletebilirsiniz.