4 najlepšie neštylizované knižnice komponentov na vytváranie prispôsobiteľných aplikácií React

Na zjednodušenie procesu vývoja aplikácií React môžete použiť knižnice komponentov, ktoré poskytujú vopred vytvorené prvky so štýlom. Tieto knižnice môžu ušetriť veľa času a úsilia, ale môžu tiež obmedziť vašu kontrolu nad štýlom vašej aplikácie. Ak potrebujete väčšiu kontrolu nad štýlom aplikácií React, zvážte použitie knižnice komponentov bez štýlu.

Čo sú to knižnice neštylizovaných komponentov?

Neštylizovaný komponent knižnice sa používajú na vývoj dostupných aplikácií React. Sú to kolekcie opakovane použiteľných komponentov používateľského rozhrania bez preddefinovaných štýlov. Poskytujú vám základnú štruktúru prvkov používateľského rozhrania bez akéhokoľvek štýlu. To vám dáva úplnú kontrolu nad tým, ako vaše komponenty vyzerajú a pôsobia.

Výhody neštylizovaných knižníc komponentov

Tu sú niektoré z výhod používania knižníc komponentov bez štýlu:

• Úplná kontrola nad stylingom: Neštylizované knižnice komponentov vám poskytujú plnú kontrolu nad tým, ako vaše komponenty vyzerajú. Na prispôsobenie komponentov tak, aby zodpovedali vašim potrebám, môžete použiť ľubovoľný rámec CSS alebo štýlov.
  instagram viewer
• Urýchliť vývoj: Neštylizované knižnice komponentov vám môžu pomôcť urýchliť vývoj poskytnutím sady vopred vytvorených komponentov, ktoré môžete použiť vo svojej aplikácii.
• Jednoduchá údržba: Knižnice komponentov bez štýlu sa ľahko udržiavajú, pretože nie sú pevne spojené so žiadnym špecifickým rámcom štýlu. To znamená, že môžete jednoducho aktualizovať štýl bez toho, aby ste museli meniť základný kód.

Radix UI je neštylizovaná knižnica komponentov, ktorá sa zameriava na dostupnosť. Poskytuje sadu komponentov používateľského rozhrania navrhnutých tak, aby boli prístupné všetkým používateľom. Môžeš vytvárať krásne aplikácie React pomocou používateľského rozhrania Radix.

Pri práci s Radix UI môžete namiesto celej knižnice nainštalovať jednotlivé komponenty, ktoré potrebujete. To zaisťuje, že vaša aplikácia bude ľahká.

Napríklad, ak potrebujete iba komponent akordeónu, môžete ho nainštalovať do aplikácie spustením nasledujúceho príkazu:

npm install @radix-ui/react-accordion

Po nainštalovaní akordeónového komponentu môžete vytvárať akordeóny v aplikácii React.

Tu je príklad použitia akordeónového komponentu:

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

Vyššie uvedený blok kódu nastavuje základný neštylizovaný komponent akordeónu pomocou @radix-ui/react-akordeón knižnica, ktorá umožňuje skladacie položky s prispôsobiteľným obsahom.

Kód vygeneruje akordeón, ktorý vyzerá takto:

Knižnica React Aria je sada háčikov na vytváranie používateľských rozhraní v Reacte. Knižnica uľahčuje vytváranie prístupných webových aplikácií tým, že poskytuje kolekciu komponentov, ktoré dodržiavajú osvedčené postupy pre prístupnosť.

Spoločnosť Adobe vyvinula a spravuje knižnicu React Aria. Knižnica je súčasťou rozsiahlejšieho systému Adobe Spectrum Design System, ktorý poskytuje komplexný súbor návrhových pokynov a zdrojov na vytváranie prístupných používateľských rozhraní. Prvky poskytované knižnicou React Aria sú bez štýlu, čo vám umožňuje prispôsobiť prvky tak, aby vyhovovali vašim potrebám.

Ak chcete použiť React Aria vo svojej aplikácii React, nainštalujte ju spustením nasledujúceho príkazu:

npm install react-aria

Tu je príklad, ako vytvoriť komponent tlačidla pomocou useButton háčik:

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 môžete importovať a vykresliť súbor tlačidlo komponent v akomkoľvek inom komponente, ktorý si vyberiete.

Napríklad:

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

Keď vykreslíte blok kódu vyššie, vygeneruje sa jednoduché tlačidlo, ktoré vyzerá takto:

Ak vám je používanie React Aria nepríjemné kvôli háčikom, použite Reagovať Aria Components namiesto toho knižnica. Táto knižnica poskytuje vopred zostavené komponenty, ktoré sú štandardne prístupné. Je to tenká vrstva na vrchu knižnice React Aria. Poskytnuté komponenty sú bez štýlu, takže tieto dve knižnice sú veľmi podobné.

Základné používateľské rozhranie je neštylizovaná knižnica používateľského rozhrania React, ktorá poskytuje komponenty používateľského rozhrania bez úpravy štýlu. Tím Material UI vytvoril základné používateľské rozhranie so sadou základných komponentov, ktoré môžete použiť na vytvorenie vlastných vlastných aplikácií React. Na tom istom založili knižnicu Base UI robustné inžinierstvo ako Material UI, ale Base UI neimplementuje Material Design.

Base UI môžete nainštalovať do vašej aplikácie React pomocou tohto príkazu:

npm install @mui/base

Základné používateľské rozhranie poskytuje komponenty na cestách, čo znamená, že môžete priamo importovať a používať komponenty z knižnice. Poskytuje tiež háčiky, ktoré môžete použiť na vytvorenie a konfiguráciu vašich komponentov.

Tu je príklad použitia komponentov základného používateľského rozhrania:

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


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

Tento kód vygeneruje jednoduché tlačidlo pomocou Tlačidlo komponent knižnice Base UI. Môžete tiež použiť useButton hák vykonávať rovnakú úlohu.

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


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

The useButton hák a Tlačidlo komponent vygeneruje neštylizované tlačidlo, ako je znázornené na obrázku nižšie.

Ďalšou knižnicou, ktorú môžete preskúmať, je bezhlavé používateľské rozhranie, ktoré ponúka neštylizované prvky používateľského rozhrania, čo vám dáva slobodu prispôsobiť vzhľad a správanie vašich komponentov používateľského rozhrania podľa vlastného uváženia.

Knižnicu môžete nainštalovať pomocou nasledujúceho príkazu:

npm install @headlessui/react

Po nainštalovaní knižnice môžete použiť niekoľko komponentov, ktoré knižnica poskytuje vo vašej aplikácii React.

Naprí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 príklade vytvoríte kontextové okno pomocou Popover komponent z knižnice Headless UI. Blok kódu vyššie vygeneruje kontextové okno, ktoré vyzerá takto.

Získajte úplnú kontrolu s neštýlovými komponentmi

Neštylizované knižnice komponentov vám poskytujú úplnú kontrolu nad štýlom vašej aplikácie React, čo vám umožňuje vytvárať jedinečné používateľské skúsenosti. Tieto knižnice ponúkajú celý rad možností, ktoré vyhovujú vašim potrebám. Využitím knižníc uvedených vyššie môžete vytvárať vizuálne príťažlivé a vysoko prispôsobiteľné aplikácie React.