formik-patterns
Gotowe wzorce walidacji formularzy dla React – szybko zbuduj bezpieczne formularze z Formik
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Umożliwia ci tworzenie formularzy z zaawansowaną walidacją przy użyciu biblioteki Formik i schematu Yup. Zawiera gotowe wzorce do obsługi pól tekstowych, walidacji e-maila, haseł oraz obsługi wysyłania danych. Dzięki temu szybko wdrażasz formularze logowania, rejestracji i inne z automatycznym sprawdzaniem błędów, obsługą stanu wysyłania oraz wyłączaniem przycisku aż do poprawnego wypełnienia wszystkich pól.
Jak używać
Zainstaluj umiejętność w swoim projekcie Claude, wskazując repozytorium ChrisWiles/claude-code-showcase i ścieżkę .claude/skills/formik-patterns.
Zaimportuj useFormik z biblioteki Formik oraz yup do definiowania schematów walidacji – będą one podstawą każdego formularza.
Zdefiniuj schemat walidacji za pomocą yup.object(), określając reguły dla każdego pola (np. email musi być poprawnym adresem, hasło minimum 8 znaków z wymogami na znaki).
Utwórz komponent formularza, inicjalizując useFormik z wartościami początkowymi, schematem walidacji oraz funkcją onSubmit do obsługi wysyłania danych.
Połącz pola input z metodami formik.handleChange, formik.handleBlur oraz wyświetlaj błędy z formik.errors tylko po dotknięciu pola (formik.touched).
Dodaj przycisk submit, który wyłącza się gdy formularz nie jest poprawny (!formik.isValid) lub trwa wysyłanie (formik.isSubmitting), a wyświetla stan ładowania podczas przetwarzania.