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

Często zadawane pytania

Czym dokładnie wyróżnia się biblioteka Chakra UI na tle innych rozwiązań dla Reacta?

Chakra UI to prosta, modułowa i dostępna biblioteka komponentów, która została stworzona do szybkiego budowania aplikacji w środowisku React. Choć na rynku istnieją już duże i sprawdzone rozwiązania, takie jak MaterialUI, Ant Design czy React Bootstrap, Chakra UI wyróżnia się na ich tle przede wszystkim świetnymi, wbudowanymi rozwiązaniami ułatwiającymi codzienną pracę. Do jej kluczowych zalet należy zaliczyć wyjątkową dbałość o dostępność (accessibility), bardzo szerokie możliwości customizacji oraz natywne wsparcie dla tworzenia responsywnych interfejsów. Ponadto biblioteka ta charakteryzuje się lekkością, gdyż waży jedynie 375 kB po minifikacji oraz 101 kB po minifikacji i kompresji gzip, przy czym do jej działania wymagana jest dodatkowa instalacja Emotion.

W jaki sposób można dostosować wygląd komponentów w tej bibliotece?

Dostosowywanie wyglądu komponentów w Chakra UI jest wyjątkowo proste i intuicyjne. Pracę zazwyczaj rozpoczyna się od zdefiniowania własnego motywu (theme), w którym można precyzyjnie określić kolory, rozmiary fontów, cienie oraz punkty przełamania dla responsywności (breakpoints). Co więcej, każdy pojedynczy komponent udostępniany przez tę bibliotekę przyjmuje liczne propsy, które bezpośrednio wpływają na jego stylowanie. Przykładowo, modyfikując propsy komponentu przycisku, można łatwo zmienić jego schemat kolorów, wariant wizualny czy rozmiar, a także kontrolować jego zachowanie i wygląd w stanie ładowania. Choć takie przekazywanie propsów przypomina rozwiązania znane z TailwindCSS czy Styled System, należy pamiętać o zachowaniu zwięzłości kodu, aby uniknąć problemu obniżenia jego czytelności przez nadmiar parametrów.

Jak wygląda konfiguracja trybu ciemnego przy użyciu Chakra UI?

Wdrożenie trybu ciemnego przy użyciu biblioteki Chakra UI zostało maksymalnie uproszczone, aby ułatwić developerom pracę nad nowoczesnymi serwisami. Większość gotowych komponentów wchodzących w skład tej biblioteki wspiera dark mode w sposób domyślny, zaraz po ich uruchomieniu. Aby całość zaczęła poprawnie funkcjonować w projekcie, wymagana jest jedynie bardzo drobna wstępna konfiguracja. Dodatkową zaletą jest możliwość łatwego zintegrowania strony z systemowym trybem kolorów użytkownika. Oznacza to, że jeśli odwiedzający ma ustawiony domyślny tryb ciemny bezpośrednio w ustawieniach swojego urządzenia lub systemu operacyjnego, witryna automatycznie wykryje te preferencje i bez problemu dostosuje swój wygląd do oczekiwań użytkownika.

Jak realizowane jest tworzenie responsywnych widoków w tej technologii?

Chakra UI wspiera tworzenie w pełni responsywnych projektów (RWD) od razu po instalacji, eliminując potrzebę ręcznego pisania reguł CSS media queries. Biblioteka wykorzystuje podejście mobile-first i bazuje na regule @media(min-width). Do definiowania stylów dla różnych rozmiarów ekranu wykorzystuje się wartości przekazywane w postaci obiektów lub tablic. Przykładowo, w komponencie tekstowym można przekazać tablicę określającą rozmiar czcionki i wyrównanie tekstu dla kolejnych breakpointów, używając wartości null tam, gdzie styl nie ma ulegać zmianie. Alternatywnym i bardziej czytelnym sposobem zapisu jest składnia obiektowa, gdzie jawnie przypisuje się wartości do konkretnych punktów kontrolnych, takich jak base czy md. Ułatwia to szybkie kontrolowanie wyglądu elementów na różnych urządzeniach.

W jaki sposób biblioteka wspiera dostępność stron i wymogi WCAG?

Dostępność interfejsu to jeden z kluczowych aspektów, na które położono nacisk podczas tworzenia biblioteki Chakra UI. Narzędzie to automatycznie dba o realizację wielu wytycznych standardu WCAG bezpośrednio w swoich komponentach. Użytkownicy korzystający z biblioteki mają od razu zapewnione poprawnie działające obramowania focusu wokół aktywnych elementów oraz prawidłowo zaprogramowaną nawigację za pomocą klawiatury. Dodatkowo Chakra UI wprowadziła pełne wsparcie dla języków zapisywanych od prawej do lewej strony (RTL), co znacząco ułatwia równoległe tworzenie komponentów dla kierunków RTL i LTR. Należy jednak pamiętać, że biblioteka nie rozwiązuje wszystkich problemów automatycznie i po stronie programisty nadal pozostaje dbałość o poprawną strukturę nagłówków czy atrybuty alt obrazów.