4 Gründe, Chakra UI in deinem nächsten Projekt zu verwenden

Was ist Chakra UI?

Auf der Homepage von ChakraUI heißt es, es sei eine einfache, modulare und barrierefreie Komponentenbibliothek, mit der du React-Apps schnell entwickeln kannst. Nach einigen Projekten mit Chakra kann ich dem nur zustimmen. UIs zu bauen war noch nie so schnell und bequem.

Vielleicht kennst du bereits Bibliotheken wie MaterialUI, Ant Design oder React Bootstrap. Und vielleicht fragst du dich, warum du noch eine weitere UI-Bibliothek brauchst, wenn es schon so viele bewährte Optionen gibt. Nun, Chakra sticht vor allem durch starke Built-ins, Accessibility und hohe Anpassbarkeit hervor.

Die Vorteile von Chakra UI

Leicht anpassbar

Einer der größten Vorteile von ChakraUI ist, dass du es sehr einfach an deine Design-Anforderungen anpassen kannst. Üblicherweise startest du mit einem Custom Theme, in dem du Dinge wie Farben, Schriftgrößen, Breakpoints für Responsive Design, Schatten und vieles mehr definierst. Das bietet bereits viel Flexibilität für komplexe UIs – und es geht noch weiter.

Jede verwendete Komponente akzeptiert viele verschiedene Props, mit denen du sie stylen kannst. 

Schauen wir uns zum Beispiel eine einfache Verwendung der `<Button>`-Komponente in Chakra UI an:

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

Mit diesem Codeschnipsel rendert Chakra einen Button mit den im Theme definierten Styles. 

Jetzt ändern wir mit ein paar Props den Stil: 

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

In diesem Beispiel wechseln wir das Farbschema des Buttons auf eine rote Palette und stellen die Variante auf einen ausgefüllten Hintergrund um. Außerdem ändern wir die Größe auf „medium“ und setzen isLoading auf false.

Schauen wir weiter: Zuerst ändern wir das Farbschema des Buttons, sodass eine Teal-Farbpalette verwendet wird. Als Nächstes ändern wir die Variante, sodass statt eines ausgefüllten Hintergrunds nur eine Umrandung zu sehen ist. Dann vergrößern wir den gesamten Button. Neben Styles können wir auch das Verhalten anpassen: Wenn der Wert „isLoading“ true ist, blenden wir das Icon aus und zeigen einen Loader an, der ebenfalls einige Props akzeptiert. Sowohl Icon als auch Loader sind ebenfalls Teil von ChakraUI!

Wenn du schon einmal TailwindCSS verwendet hast, das zuletzt stark an Popularität gewonnen hat, oder Styled System, wirst du einige Ähnlichkeiten erkennen. Tailwind ist ein Set aus CSS-Klassen, mit denen du Komponenten zusammensetzen kannst. Styled System und Chakra liefern hingegen komplette Komponenten, deren einzelne Styles du per Props änderst. Alle diese Ansätze haben viele Fans – und auch Kritiker. Letztere führen als Nachteil an, dass der Code durch zu viele Klassen/Props an Lesbarkeit verlieren kann. Das kann natürlich passieren, daher ist es wichtig, unsere Komponenten schlank zu halten.

Dark-Mode-Unterstützung

Der Dark Mode ist aus unserem Tech-Alltag kaum noch wegzudenken – auf Smartphones, Laptops und natürlich Websites. Nicht jedes Projekt benötigt zwingend einen Dark Mode, aber es ist großartig, dass Chakra die Umsetzung vereinfacht. Standardmäßig sind die meisten Chakra-Komponenten Dark-Mode-kompatibel. Mit ein wenig Konfiguration bist du startklar! Außerdem kannst du den systemweiten Farbmodus nutzen: Wenn ein User auf seinem Gerät den Dark Mode als Standard festlegt, übernimmt deine Website das automatisch.

Einfache Umsetzung von Responsive Webdesign

ChakraUI unterstützt responsive Styles out of the box. Du musst keine Media Queries manuell hinzufügen, ChakraUI bietet Objekt- und Array-Werte, um responsive Styles festzulegen. Wichtig zu wissen: Es verwendet „@media(min-width)“ für einen Mobile-First-Ansatz.

Du kannst eigene Breakpoints im Theme konfigurieren oder die Standardwerte verwenden. 

So sieht eine einfache responsive Implementierung in einer `<Text>`-Komponente aus: 

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

Mit dem obigen Snippet hat „<Text>“ „24px“ und ist auf allen Breakpoints zentriert. 

Statt eines einzelnen Werts übergeben wir ein Array. Chakra nimmt „24px“ aus dem „fontSize“-Prop und „center“ aus „textAlign“ und verwendet diese Werte für Bildschirmgrößen zwischen 0 und 30em (das sind die Standardwerte im Theme). Beachte das „null“: Im Bereich von 30em bis 48em (ebenfalls Standard-Breakpoints) wollen wir keine Styles ändern, also übergeben wir null, um unnötiges CSS zu vermeiden. Am Ende der Arrays weisen wir „56px“ und „left“ zu, sodass der Text ab 48em linksbündig und größer ist.

Ich persönlich bin kein großer Fan dieser Array-Notation. Es ist schwieriger zu erkennen, welche Styles auf welchen Breakpoint zutreffen. 

Zum Glück können wir die Objekt-Syntax verwenden: 

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

Die Syntax sieht anders aus, das Verhalten bleibt gleich.

Barrierefrei

Die Bedeutung von Accessibility kann man nicht genug betonen. Ein beträchtlicher Teil der Menschen hat eine Form von Beeinträchtigung, daher ist es entscheidend, zugängliche UIs zu entwickeln. Wir müssen in der Regel einige WCAG-Richtlinien umsetzen, doch Dinge wie korrekte Fokusmarkierungen und Tastaturnavigation deckt Chakra bereits ab. Natürlich ist das nicht alles – wir müssen weiterhin auf eine saubere Überschriften-Hierarchie und Alt-Texte für Bilder achten.

BONUS: Kürzlich hat ChakraUI Support für RTL-Sprachen hinzugefügt. Damit ist es deutlich einfacher geworden, Komponenten zu erstellen, die sowohl RTL- als auch LTR-Sprachen abdecken.

Fazit

Wie du siehst, ist ChakraUI modular und barrierefrei. Außerdem ist es wirklich klein (375 kB minified, 101 kB minified und gzipped; beachte jedoch, dass du neben der Core-Chakra-Bibliothek auch Emotion installieren musst). Aus meiner Erfahrung ist es eine der besten Komponentenbibliotheken für React!

Wenn du mehr über Komponentenbibliotheken erfahren möchtest oder wissen willst, welche am besten zu deinem Projekt passt, freuen wir uns, von dir zu hören. Schreib uns an hello@start-up.house