4 najlepsze biblioteki komponentów bez stylu do tworzenia dostosowywalnych aplikacji React

Możesz użyć bibliotek komponentów, które zapewniają gotowe, stylizowane elementy, aby uprościć proces tworzenia aplikacji React. Biblioteki te mogą zaoszczędzić dużo czasu i wysiłku, ale mogą również ograniczyć kontrolę nad stylem aplikacji. Jeśli potrzebujesz większej kontroli nad stylem swoich aplikacji React, rozważ użycie biblioteki komponentów bez stylu.

Czym są biblioteki komponentów bez stylu?

Niestylizowany komponent biblioteki służą do tworzenia dostępnych aplikacji React. Są to zbiory komponentów interfejsu użytkownika wielokrotnego użytku, bez predefiniowanych stylów. Zapewniają podstawową strukturę elementów interfejsu użytkownika bez żadnej stylizacji. Daje to pełną kontrolę nad wyglądem i zachowaniem komponentów.

Korzyści z bibliotek komponentów bez stylu

Oto niektóre korzyści wynikające z używania bibliotek komponentów bez stylu:

• Pełna kontrola nad stylizacją: Biblioteki komponentów bez stylu dają pełną kontrolę nad wyglądem komponentów. Możesz użyć dowolnego CSS lub frameworka stylizacyjnego, aby dostosować komponenty do swoich potrzeb.
  instagram viewer
• Przyspiesz rozwój: Biblioteki komponentów bez stylu mogą pomóc przyspieszyć programowanie, udostępniając zestaw gotowych komponentów, których możesz używać w swojej aplikacji.
• Łatwe w utrzymaniu: Biblioteki komponentów bez stylu są łatwe w utrzymaniu, ponieważ nie są ściśle powiązane z żadną konkretną strukturą stylizacyjną. Oznacza to, że możesz łatwo zaktualizować styl bez wprowadzania zmian w kodzie źródłowym.

Radix UI to niestylizowana biblioteka komponentów, która koncentruje się na dostępności. Zapewnia zestaw komponentów interfejsu użytkownika zaprojektowanych tak, aby były dostępne dla wszystkich użytkowników. Możesz twórz piękne aplikacje React przy użyciu interfejsu użytkownika Radix.

Pracując z Radix UI, możesz zainstalować poszczególne potrzebne komponenty zamiast całej biblioteki. Dzięki temu Twoja aplikacja będzie lekka.

Na przykład, jeśli potrzebujesz tylko komponentu akordeonu, możesz zainstalować go w swojej aplikacji, uruchamiając następującą komendę:

npm install @radix-ui/react-accordion

Po zainstalowaniu komponentu akordeonowego możesz tworzyć akordeony w aplikacji React.

Oto przykład użycia komponentu akordeonowego:

import React from"react"
import * as Accordion from"@radix-ui/react-accordion"
exportdefaultfunctionApp() {
return (


"single" defaultValue="item-1" collapsible>
"item-1">
Is this accordion unstyled?</Accordion.Trigger>
Yes. It is unstyled.</Accordion.Content>
 </Accordion.Item>
 </Accordion.Root>
 </div>
 )
}

Powyższy blok kodu konfiguruje podstawowy komponent akordeonu bez stylu przy użyciu @radix-ui/react-accordion biblioteka, umożliwiająca składanie elementów z konfigurowalną zawartością.

Kod wygeneruje akordeon, który wygląda następująco:

Biblioteka React Aria to zestaw haków do budowania interfejsów użytkownika w React. Biblioteka ułatwia tworzenie dostępnych aplikacji internetowych, udostępniając zbiór komponentów zgodnych z najlepszymi praktykami dotyczącymi dostępności.

Firma Adobe opracowała i utrzymuje bibliotekę React Aria. Biblioteka jest częścią bardziej rozbudowanego systemu Adobe Spectrum Design System, który zapewnia kompleksowy zestaw wytycznych projektowych i zasobów do tworzenia dostępnych interfejsów użytkownika. Elementy dostarczane przez bibliotekę React Aria nie są stylizowane, co pozwala na dostosowanie ich do własnych potrzeb.

Aby używać React Aria w aplikacji React, zainstaluj ją, uruchamiając następującą komendę:

npm install react-aria

Oto przykład tworzenia komponentu przycisku przy użyciu metody użyj przycisku hak:

import React from'react'
import {useButton} from'react-aria';
functionButton(props: any) {
let ref = React.useRef(null);
let { buttonProps } = useButton(props, ref);
return (

 {props.children}
 </button>
 );
}
exportdefault Button;

Teraz możesz importować i renderować plik przycisk komponent w dowolnym innym wybranym komponencie.

Na przykład:

import React from'react'
import Button from'./Button';
functionApp() {
return (
Click Me</Button>
 );
}
exportdefault App;

Kiedy wyrenderujesz powyższy blok kodu, wygeneruje on prosty przycisk, który wygląda tak:

Jeśli nie czujesz się komfortowo korzystając z React Aria ze względu na haczyki, użyj Reaguj na komponenty Arii zamiast tego biblioteka. Ta biblioteka zawiera gotowe komponenty, które są domyślnie dostępne. Jest to cienka warstwa na wierzchu biblioteki React Aria. Dostarczone komponenty nie są stylizowane, więc obie biblioteki są bardzo podobne.

Base UI to niestylowana biblioteka React UI, która udostępnia komponenty interfejsu użytkownika bez stylizacji. Zespół Material UI stworzył Base UI z zestawem podstawowych komponentów, których możesz użyć do tworzenia własnych, niestandardowych aplikacji React. Oparli na tym samym bibliotekę Base UI solidna inżynieria jako Material UI, ale podstawowy interfejs użytkownika nie implementuje Material Design.

Możesz zainstalować Base UI w swojej aplikacji React za pomocą tego polecenia:

npm install @mui/base

Podstawowy interfejs użytkownika zapewnia komponenty w dowolnym miejscu, co oznacza, że ​​możesz bezpośrednio importować komponenty z biblioteki i korzystać z nich. Zawiera także zaczepy, których można używać do tworzenia i konfigurowania komponentów.

Oto przykład użycia komponentów Base UI:

import React from"react";
import Button from"@mui/base/Button";
exportdefaultfunctionApp() {
return (


Click Me</Button>
 </div>
 );
}

Ten kod generuje prosty przycisk za pomocą Przycisk składnik biblioteki Base UI. Możesz także skorzystać z użyj przycisku hak do wykonania tego samego zadania.

import React from"react";
import useButton from"@mui/base/useButton";
exportdefaultfunctionApp() {
const { getRootProps } = useButton();
return (


Click Me</button>
 </div>
 );
}

The użyj przycisku hak i Przycisk komponent wygeneruje przycisk bez stylu, jak pokazano na obrazku poniżej.

Kolejną biblioteką, którą możesz eksplorować, jest Headless UI, który oferuje niestylowane elementy interfejsu użytkownika, dając ci swobodę dostosowywania wyglądu i zachowania komponentów interfejsu użytkownika według własnego uznania.

Bibliotekę można zainstalować za pomocą następującego polecenia:

npm install @headlessui/react

Po zainstalowaniu biblioteki możesz używać kilku jej komponentów w swojej aplikacji React.

Na przykład:

import React from"react";
import { Popover } from"@headlessui/react";
exportdefaultfunctionApp() {
return (




Popover</Popover.Button>

This is a Popover</p>
 </Popover.Panel>
 </Popover>
 </div>
 );
}

W tym przykładzie tworzysz popover za pomocą Popover komponent z biblioteki Headless UI. Powyższy blok kodu wygeneruje popover, który wygląda tak.

Uzyskaj pełną kontrolę dzięki niestylizowanym komponentom

Biblioteki komponentów bez stylu zapewniają pełną kontrolę nad stylem aplikacji React, umożliwiając tworzenie unikalnych doświadczeń użytkownika. Biblioteki te oferują szereg opcji dostosowanych do Twoich potrzeb. Korzystając z bibliotek wymienionych powyżej, możesz tworzyć atrakcyjne wizualnie i wysoce konfigurowalne aplikacje React.