Biblioteki do formularzy w React #3 – formik

Ten post jest trzecią częścią serii o obsłudze formularzy w React:

Spis Treści

  1. Wprowadzenie
  2. Prosty przykład
    1. Baza do dalszych prac
      1. Wersja klasyczna
      2. Wersja z hookami
    2. Walidacja
      1. Prosta walidacja
      2. Asynchroniczna walidacja
      3. Walidacja z pomocą biblioteki Yup i tworzenie schematów
      4. Pełny kod walidacji
    3. Customowe komponenty z hookiem useField
  3. Przykład zaawansowany
    1. Brak obsługi plików w Formik
    2. Komponent FieldsArray
    3. Wyświetlanie za pomocą CSS GRID
    4. Pełny kod
  4. Podsumowanie

Wprowadzenie

Formik to jedna z najbardziej uznanych bibliotek do zarządzania formularzami w React. Jej autor, Jared Palmer, jest autorem wielu projektów których my jako programiści używamy na codzień.

Formik upraszcza codzienną pracę z formularzami, ułatwiając zarządzanie wartościami w formularzu, walidacją i jego stanem wewnętrznym. Dzięki bibliotece możesz w prosty sposób:

  • podpiąć customowe walidacje które podepniemy tak prosto jak walidacje natywne,
  • podpiąć walidacje asynchroniczne
  • sygnalizować użytkownikowi, które pola zostały już przez niego wypełnione
  • obsługiwać tablice i obiekty jako pola formularza

Oraz wiele innych, jednocześnie używając prostego i czytelnego API.
Formik wspiera integrację z TypeScript. Obsługuje również React Native, dzięki czemu raz zdobyta wiedza może być użyta w aplikacji internetowej i aplikacji natywnej.
Wiedza jaką zdobędziesz czytając ten wpis pozwoli Ci używać biblioteki Formik w codziennej pracy, oszczędzając Ci wielu nieprzyjemności ręcznej obsługi formularzy.
Zahaczymy również o CSS GRID – jeśli chcesz dowiedzieć się o nim czegoś więcej, możesz obejrzeć prezentację jaką miałem podczas webinaru dla lokalnej grupy Tarnów Devs:

W opisie filmu znajdziesz link do slajdów na Google Drive oraz link do repo na Githubie do playgroundu którego w prezentacji używałem.

Czytaj dalej „Biblioteki do formularzy w React #3 – formik”

Biblioteki do formularzy w React #2 – react-hook-form

Ten post jest kontynuacją serii o obsłudze formularzy w React:

Spis Treści

  1. Wprowadzenie
  2. Prosty przykład
    1. Baza do dalszych prac
    2. Walidacja
      1. Prosta walidacja
      2. Customowa walidacja
      3. Asynchroniczna walidacja
      4. Wiadomości dla błędów walidacji
    3. Obsługa stanu formularza – obiekt formState
      1. Informowanie o tym, że trwa wysyłanie formularza
      2. Oznaczanie pól, które zmodyfikował użytkownik
    4. Pełny kod prostego przykładu
  3. Zaawansowany przykład
    1. Obsługa tablic i obiektów jako pól formularza
    2. Walidacja rozmiarów obrazka
    3. Pełny kod pierwszej wersji
    4. Ostateczna wersja
    5. Pełny kod wersji ostatecznej
  4. DevTools dla React Hook form
    1. Podpięcie DevTools
    2. Wyświetlanie DevTools tylko podczas developmentu
  5. Podsumowanie

Wprowadzenie

Jeżeli szukasz biblioteki, która pozwoli Ci zachować formularze proste i czytelne, nie powodując dużego narzutu na kod i nie narzucając zbyt wielu własnych rozwiązań – a jednocześnie dającej duże możliwości zarządzania stanem formularza, walidacją itd to react-hook-form jest rozwiązaniem stworzonym dla Ciebie.

Czytelne i proste API oparte na hookach, dedykowane narzędzie do debugowania powodują, że react-hook-form jest rozwiązaniem pierwszego wyboru do zarządzania formularzami.

Czytaj dalej „Biblioteki do formularzy w React #2 – react-hook-form”