9 reactowych bibliotek styled-components do tworzenia UI

Dyskusja w społeczności React o tym, jak stylizować komponenty interfejsu użytkownika, wydaje się nabierać tempa. Ludzie gotowi są poprzeć praktycznie wszystko, od modułów CSS, przez CSS inline, do CSS w JS.

Względny wzrost popularności CSS w JS, którego preferują niektórzy deweloperzy, jest ściśle połączony z powstaniem ekosystemu komponentów React oraz projektem Styled-Components autorstwa Maxa Stoibera, posiadającym ponad 200 kontrybutorów.

Aby pomóc Ci zaoszczędzić czas i przetestować Styled-Components dla interfejsu użytkownika w Twojej własnej aplikacji, zebrałem kilka przydatnych bibliotek, które wykorzystują styled-components w celu dostarczenia zgrabnego zestawu do tworzenia UI. Możesz użyć Bita (GitHub), aby podzielić się wybranymi komponentami i udostępniać je jako funkcjonalną kolekcję. Następnie każdy członek Twojego zespołu może odkrywać, wypróbować i użyć ich w swoich aplikacjach.

Każdy komponent będzie również natychmiast udostępniony za pomocą NPM/Yarn i może być zmieniany i aktualizowany z dowolnego projektu, który z nich korzysta. Wypróbuj.

Rebass

Rebass zebrał ponad 5 tysięcy gwiazdek i jest to zestaw “podstawowy komponentów dla Reacta, zbudowanych w oparciu o styled-system”. Jest to lekki i pięknie zaprojektowany zestaw 8 rozszerzalnych, spójnych i “reużywalnych” komponentów, zbudowanych z myślą o responsywności i łatwości dostosowania (z wbudowanymi motywami). Tutaj znajdziesz jego komponenty.

Zendesk's Garden React components

Choć ta biblioteka posiada “tylko” 590 gwiazdek, zapewnia dobrze spreparowane komponenty, które są również indywidualnie publikowane w NPM i mogą być łatwo udostępniane jako komponenty przez Bita. Komponenty są zbudowane tak, aby współpracować z szeregiem urządzeń wejściowych, są przystosowane do obsługi układów od prawej do lewej, a niektóre zawierają nawet animacje. Drobne fragmenty HTML, CSS i JavaScript są gotowe do użycia w każdej aplikacji opartej na React. Rzuć okiem na zendeskgarden.

Atlaskit

Biblioteka komponentów React UI Atlassiana, implementująca wytyczne projektowe Atlassian i wykorzystująca Styled-Components. Biblioteka została uruchomiona 2 lata temu w celu wdrożenia projektów ADG3 dla wszystkich produktów Atlassian Cloud, które są zbudowane na bazie React. Każdy komponent atlassian / Atlaskit-MK-2 jest pakietem.

Grommet V2

V2 wspaniałej biblioteki Grommet (używanej przez Netflix, Uber itp.) zastępuje SASS naszymi Styled-Components. Nie potrzebujesz specjalnych konfiguracji ani użycia SASS do stylizacji komponentów. Nie jest już ona globalna, a tworzenie motywu nie dzieje się w czasie kompilacji. Wypróbuj go (nadal w wersji alfa).

Smooth-UI

Biblioteka komponentów UI posiadająca 1230 gwiazdek, oparta o React i styled-components, która kładzie nacisk na user experience, w tym rozszerzalność typową dla Styled. Udostępnia także niektóre klasy, więc nie musisz uczyć się nowego API, aby rozszerzyć komponenty. Możesz sprawdzić, jak napisane są komponenty i używać ich w ten sposób. Wypróbuj Smooth-ui.

Reactackle

Przy 257 gwiazdkach, Reactackle jest biblioteką React UI zbudowaną na styled-components, która zapewnia obsługę w wielu przeglądarkach. Biblioteka wspiera dostosowywanie podstawowych aspektów projektu i zapewnia wrappery do motywów.

Reakit

Reakit to biblioteka UI posiadająca prawie 2 tysiące gwiazdek. Pozwala wykorzystać dowolny komponent lub kontener do stworzenia czegoś nowego. Wszystkie komponenty są zgodne z WAI-ARIA, i wszystkie są zgodne z wzorcem pojedynczego elementu, co czyni je spójnymi niczym elementy HTML.

Loadery React CSS a loadery Styled

react-css-loader to kolekcja loaderów w czystym CSS przeznaczona dla Reacta. Zostały one oparate na popularnym projekcie css-loader i wykorzystują styled-components.

Styled-Loaders to zestaw loaderów  zbudowanych z Preact i Styled-Components - koncepcję czerpią z popularnego projektu spinkit.

Stylizowane ikony

Projekt, który dostarcza pakiety ikon Font Awesome, Feather, Material Design i Octicons jako właśnie Styled Components, z pełną obsługą typów TypeScript i modułami ES. Znajdziesz je w „eksploratorze ikon”.

Inne biblioteki warte uwagi

Należy zauważyć, że wiele z nich nie jest już utrzymywana lub wciąż są niegotowe.

styled-components/awesome-styled-components
zksailor534/react-adminlte-dash
xDae/styled-bootstrap
buttercup/ui
coderboxapp/coderbox-atoms
yldio/joyent-portal
hackclub/design-system
resin-io-modules/rendition
jacobwgillespie/styled-icons
bondz/react-epic-spinners

Oryginał artykułu w języku angielskim możesz przeczytać tutaj.