PrimeReact 1
Was ist PrimeReact?
PrimeReact ist eine umfangreiche Open Source Bibliothek von User-Interface-Komponenten für die Integration in React-Projekte. PrimeReact wird von dem türkischen Unternehmen PrimeTek entwickelt und steht unter der MIT-Lizenz. PrimeReact umfasst Komponenten aus den Bereichen Form-Elemente, Daten-Visualisierung, UI-Panels, Dialoge, Menüs und einige mehr. Außerdem bietet PrimeReact mit dem sogenannten „Theming“ verschiedene Design-Themen an, durch die die verwendeten UI-Elemente ein einheitliches Design bekommen. Dabei können auch eigene Themen entworfen und verwendet werden.
Integration von PrimeReact
PrimeReact kann wie folgt mit npm importiert werden:
Die in der Regel mitverwendeten Prime-Icons können wie folgt importiert werden:
Für die Verwendung von PrimeReact in React-Projekten wird außerdem noch „react-transition-group“ benötigt:
Verwenden von PrimeReact
PrimeReact-Komponenten können wie folgt in eine React-Komponente integriert werden:
Außerdem ist noch das Einbinden von folgenden elementaren CSS-Definitionen erforderlich:
PrimeReact-Theming
PrimeReact trennt beim Design zwischen Struktur (core) und Thema (theme). Während die „core“-CSS-Definitionen die Struktur der PrimeReact-Komponenten definieren, können durch Auswahl einer der mitgelieferten „theme“-CSS-Definitionen die Farbgebung und die Abstände (padding und margin) für alle Komponenten einheitlich innerhalb einer Anwendung festgelegt werden.
Verwenden von Themes
Mit Hilfe der import-Anweisung „import ‚primereact/resources/themes/[thema]/theme.css‘“ kann eines der mitgelieferten Themen ausgewählt werden:
Erstellen von eigenen Themes
Eigene Themen können auf zwei Arten erstellt werden. Zum einen kann die CSS-Datei eines vordefinierten Themas kopiert und angepasst werden:
Zum anderen kann der kostenpflichtige Primereact-Visual-Theme-Designer verwendet werden:
