4 powody, aby użyć Chakra UI w swoim kolejnym projekcie

Czym jest Chakra UI?

Na stronie głównej ChakraUI przeczytasz, że to prosta, modułowa i dostępna biblioteka komponentów, która pozwala z dużą szybkością budować aplikacje w React. Po zrealizowaniu kilku projektów z użyciem Chakra mogę się z tym w pełni zgodzić. Tworzenie interfejsów jeszcze nigdy nie było tak szybkie i wygodne.

Być może znasz już biblioteki takie jak MaterialUI, Ant Design czy React Bootstrap. I możesz się zastanawiać, po co kolejna biblioteka UI, skoro masz już duży, sprawdzony zestaw opcji. Cóż, Chakra wyróżnia się przede wszystkim świetnymi wbudowanymi rozwiązaniami, dbałością o dostępność i bardzo dużymi możliwościami customizacji.

Zalety Chakra UI

Łatwe dostosowanie

Jedną z największych zalet ChakraUI jest to, że bardzo łatwo dopasujesz ją do swoich potrzeb projektowych. Zwykle zaczynasz od własnego motywu (theme), w którym określasz m.in. kolory, rozmiary fontów, breakpoints dla responsywności, cienie i wiele więcej! To już daje ogromną elastyczność przy tworzeniu zaawansowanych interfejsów — i to nie wszystko.

Każdy używany komponent przyjmuje wiele różnych propsów, którymi możesz go stylować. 

Na przykład spójrzmy na proste użycie komponentu `<Button>` w Chakra UI:

 ```jsx <Button colorScheme="teal" variant="outline" size="lg" isLoading={loading} loadingText="Loading"> Click me </Button>

Korzystając z tego fragmentu, Chakra wyrenderuje przycisk ze stylami zdefiniowanymi w theme. 

Teraz użyjmy kilku propsów, aby zmienić jego styl: 

```jsx <Button colorScheme="red" variant="solid" size="md" isLoading={false}> Click me </Button>

W tym fragmencie zmieniamy schemat kolorów przycisku na czerwoną paletę i ustawiamy wariant z pełnym tłem. Zmieniamy też rozmiar na medium i ustawiamy isLoading na false.

Zobaczmy. Najpierw zmieniamy schemat kolorów przycisku tak, by korzystał z palety teal. Następnie modyfikujemy wariant — zamiast pełnego tła mamy jedynie obramowanie. Potem powiększamy cały przycisk. Poza stylami możemy zmieniać także zachowanie przycisku. Gdy “isLoading” ma wartość true, ukrywamy ikonę i wyświetlamy loader, który również przyjmuje kilka propsów. Zarówno ikona, jak i loader są częścią ChakraUI!

Jeśli korzystałeś z TailwindCSS, który ostatnio zyskuje na popularności, albo ze Styled System, zauważysz pewne podobieństwa. Tailwind to zestaw klas CSS, z których komponujesz komponenty. Z kolei Styled System i Chakra dostarczają gotowe komponenty, ale możesz zmieniać konkretne style za pomocą propsów. Każde z tych rozwiązań ma wielu zwolenników i przeciwników. Ci drudzy zwracają uwagę na istotną wadę: kod może tracić czytelność z powodu zbyt wielu klas/propsów. Oczywiście to bywa problemem, dlatego warto dbać o zwięzłość naszych komponentów.

Wsparcie trybu ciemnego

Tryb ciemny stał się integralną częścią naszego technologicznego życia. Używamy go na smartfonach, laptopach i — oczywiście — na stronach internetowych. Choć nie każdy projekt wymaga implementacji dark mode, świetne jest to, że Chakra upraszcza cały proces. Domyślnie większość komponentów Chakra wspiera tryb ciemny. Wystarczy drobna konfiguracja i gotowe! Możesz też wykorzystać systemowy color mode — jeśli użytkownik ma ustawiony dark mode jako domyślny na urządzeniu, Twoja strona automatycznie go przejmie.

Proste RWD

ChakraUI wspiera style responsywne od razu po wyjęciu z pudełka. Nie musisz ręcznie dodawać media queries — ChakraUI udostępnia wartości w postaci obiektów i tablic do definiowania stylów responsywnych. Warto dodać, że używa “@media(min-width)”, wspierając podejście mobile-first.

Możesz zdefiniować własne breakpoints w konfiguracji theme albo korzystać z domyślnych. 

Sprawdźmy, jak wygląda implementacja responsywności w podstawowym komponencie `<Text>`: 

```jsx <Text fontSize={["24px", null, "56px"]} textAlign={["center", null, "left"]}> Responsive Text </Text>

Korzystając z powyższego fragmentu “<Text>” będzie miał “24px” i będzie wyśrodkowany na wszystkich breakpointach. 

Zamiast pojedynczej wartości przekazujemy tablicę wartości. Chakra weźmie “24px” z “fontSize” i “center” z “textAlign” i zastosuje je dla rozmiarów ekranu między 0 a 30em (to domyślne wartości w konfiguracji theme). Zwróć uwagę na “null”: nie chcemy zmieniać stylów w zakresie od 30em do 48em (ponownie, domyślne breakpoints), więc przekazujemy null, aby uniknąć generowania zbędnego CSS. W ostatnich indeksach tablic przypisujemy “56px” i “left”, więc nasz tekst będzie miał te style dla każdego rozmiaru ekranu większego niż 48em.

Osobiście nie jestem wielkim fanem notacji z tablicą — trudniej szybko sprawdzić, jakie style obowiązują na danych breakpointach. 

Na szczęście możemy użyć składni obiektowej: 

```jsx <Text fontSize={{ base: "24px", md: "56px" }} textAlign={{ base: "center", md: "left" }} > Responsive Text </Text>

Składnia wygląda inaczej, ale zachowanie pozostaje takie samo.

Dostępność

Nie da się przecenić znaczenia dostępności. Znaczna część osób doświadcza jakiejś formy niepełnosprawności, dlatego tworzenie dostępnych interfejsów jest kluczowe. Zwykle musimy zaimplementować kilka wytycznych WCAG, ale na szczęście takie elementy jak właściwe obramowania focusu i nawigacja klawiaturą są w Chakra zaopiekowane. Oczywiście to nie wszystko — nadal musimy pamiętać np. o hierarchicznej strukturze nagłówków czy atrybutach alt dla obrazów.

BONUS: Ostatnio ChakraUI dodało wsparcie dla języków RTL. Od teraz znacznie łatwiej tworzyć komponenty, które obsługują zarówno RTL, jak i LTR.

Podsumowanie

Jak widać, ChakraUI jest modularna i dostępna. Do tego jest naprawdę lekka (375kB po minifikacji, 101kB po minifikacji i kompresji gzip — pamiętaj jednak, że poza core Chakra musisz zainstalować Emotion). Z mojego doświadczenia to jedna z najlepszych bibliotek komponentów dla React!

Jeśli chcesz dowiedzieć się więcej o bibliotekach komponentów albo zastanawiasz się, która będzie najlepsza dla Twojego projektu, chętnie porozmawiamy. Napisz do nas na hello@start-up.house