4 nejlepší nestylizované knihovny komponent pro vytváření přizpůsobitelných aplikací React

Pro zjednodušení procesu vývoje aplikací React můžete použít knihovny komponent, které poskytují předpřipravené stylizované prvky. Tyto knihovny mohou ušetřit spoustu času a úsilí, ale také mohou omezit vaši kontrolu nad stylem vaší aplikace. Pokud potřebujete větší kontrolu nad styly aplikací React, zvažte použití knihovny komponent bez stylu.

Co jsou to knihovny nestylovaných komponent?

Nestylovaná komponenta knihovny se používají k vývoji přístupných aplikací React. Jsou to kolekce opakovaně použitelných komponent uživatelského rozhraní bez předdefinovaných stylů. Poskytují vám základní strukturu prvků uživatelského rozhraní bez jakéhokoli stylování. To vám dává úplnou kontrolu nad tím, jak vaše komponenty vypadají a působí.

Výhody knihoven nestylovaných komponent

Zde jsou některé z výhod používání nestylovaných knihoven komponent:

• Úplná kontrola nad stylingem: Knihovny komponent bez stylu vám poskytují plnou kontrolu nad tím, jak vaše komponenty vypadají. K přizpůsobení komponent tak, aby odpovídaly vašim potřebám, můžete použít jakýkoli rámec CSS nebo styling.
  instagram viewer
• Urychlit vývoj: Knihovny komponent bez stylu vám mohou pomoci urychlit vývoj poskytnutím sady předpřipravených komponent, které můžete použít ve své aplikaci.
• Snadno se udržuje: Knihovny komponent bez stylu se snadno udržují, protože nejsou pevně spojeny s žádným konkrétním rámcem stylů. To znamená, že můžete snadno aktualizovat styl, aniž byste museli měnit základní kód.

Radix UI je nestylovaná knihovna komponent, která se zaměřuje na přístupnost. Poskytuje sadu komponent uživatelského rozhraní navržených tak, aby byly přístupné všem uživatelům. Můžeš vytvářejte krásné aplikace React pomocí uživatelského rozhraní Radix.

Při práci s Radix UI můžete místo celé knihovny nainstalovat jednotlivé komponenty, které potřebujete. To zajišťuje, že vaše aplikace bude lehká.

Pokud například potřebujete pouze součást akordeonu, můžete ji nainstalovat do aplikace spuštěním následujícího příkazu:

npm install @radix-ui/react-accordion

Po instalaci akordeonové komponenty můžete vytvářet akordeony v aplikaci React.

Zde je příklad použití akordeonu:

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>
 )
}

Výše uvedený blok kódu nastavuje základní nestylizovanou akordeonovou komponentu pomocí @radix-ui/react-akordeon knihovna, která umožňuje skládací položky s přizpůsobitelným obsahem.

Kód vygeneruje akordeon, který vypadá takto:

Knihovna React Aria je sada háčků pro vytváření uživatelských rozhraní v Reactu. Knihovna usnadňuje vytváření přístupných webových aplikací tím, že poskytuje kolekci komponent, které se řídí osvědčenými postupy pro usnadnění.

Společnost Adobe vyvinula a spravuje knihovnu React Aria. Knihovna je součástí rozsáhlejšího systému Adobe Spectrum Design System, který poskytuje komplexní sadu návrhových pokynů a zdrojů pro vytváření přístupných uživatelských rozhraní. Prvky poskytované knihovnou React Aria jsou bez stylu, což vám umožňuje přizpůsobit prvky tak, aby vyhovovaly vašim potřebám.

Chcete-li použít React Aria ve své aplikaci React, nainstalujte ji spuštěním následujícího příkazu:

npm install react-aria

Zde je příklad, jak vytvořit komponentu tlačítka pomocí useButton háček:

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;

Nyní můžete importovat a vykreslit soubor knoflík komponentu v jakékoli jiné komponentě, kterou si vyberete.

Například:

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

Když vykreslíte blok kódu výše, vygeneruje se jednoduché tlačítko, které vypadá takto:

Pokud je vám nepříjemné používat React Aria kvůli háčkům, použijte Reagovat Aria Components místo toho knihovna. Tato knihovna poskytuje předpřipravené komponenty, které jsou ve výchozím nastavení přístupné. Je to tenká vrstva nad knihovnou React Aria. Poskytnuté komponenty nemají styl, takže obě knihovny jsou velmi podobné.

Základní uživatelské rozhraní je nestylovaná knihovna uživatelského rozhraní React, která poskytuje komponenty uživatelského rozhraní bez stylů. Tým Material UI vytvořil základní uživatelské rozhraní se sadou základních komponent, které můžete použít k vytvoření vlastních vlastních aplikací React. Na tomtéž založili knihovnu Base UI robustní inženýrství jako Material UI, ale Base UI neimplementuje Material Design.

Base UI můžete nainstalovat do vaší aplikace React pomocí tohoto příkazu:

npm install @mui/base

Základní uživatelské rozhraní poskytuje komponenty na cestách, což znamená, že můžete přímo importovat a používat komponenty z knihovny. Poskytuje také háčky, které můžete použít k vytvoření a konfiguraci vašich komponent.

Zde je příklad použití základních komponent uživatelského rozhraní:

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


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

Tento kód vygeneruje jednoduché tlačítko pomocí Knoflík součást knihovny Base UI. Můžete také použít useButton háček k provedení stejného úkolu.

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


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

The useButton hák a Knoflík komponenta vygeneruje tlačítko bez stylu, jak je znázorněno na obrázku níže.

Další knihovnou, kterou můžete prozkoumat, je rozhraní Headless UI, které nabízí prvky uživatelského rozhraní bez stylu, což vám dává svobodu přizpůsobit vzhled a chování komponent uživatelského rozhraní, jak uznáte za vhodné.

Knihovnu můžete nainstalovat pomocí následujícího příkazu:

npm install @headlessui/react

Po instalaci knihovny můžete používat několik komponent, které knihovna poskytuje ve vaší aplikaci React.

Například:

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




Popover</Popover.Button>

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

V tomto příkladu vytvoříte vyskakovací okno pomocí Druh muffinu komponenta z knihovny Headless UI. Blok kódu výše vygeneruje vyskakovací okno, které vypadá takto.

Získejte úplnou kontrolu s nestylizovanými součástmi

Knihovny komponent bez stylu vám poskytují úplnou kontrolu nad stylem vaší aplikace React, což vám umožňuje vytvářet jedinečné uživatelské zkušenosti. Tyto knihovny nabízejí řadu možností, které vyhovují vašim potřebám. Pomocí výše uvedených knihoven můžete vytvářet vizuálně přitažlivé a vysoce přizpůsobitelné aplikace React.