4 najbolje nestilizirane biblioteke komponenti za izradu prilagodljivih React aplikacija

Možete koristiti biblioteke komponenti koje pružaju unaprijed izgrađene, stilizirane elemente kako biste pojednostavili razvojni proces za React aplikacije. Ove biblioteke mogu uštedjeti mnogo vremena i truda, ali također mogu ograničiti vašu kontrolu nad stilom vaše aplikacije. Ako vam je potrebna veća kontrola nad stilom vaših React aplikacija, razmislite o korištenju nestilizirane biblioteke komponenti.

Što su biblioteke nestiliziranih komponenti?

Nestilizirana komponenta knjižnice se koriste za razvoj pristupačnih React aplikacija. To su zbirke komponenti korisničkog sučelja za višekratnu upotrebu bez unaprijed definiranih stilova. Pružaju vam osnovnu strukturu elemenata korisničkog sučelja bez stiliziranja. To vam daje potpunu kontrolu nad izgledom i dojmom vaših komponenti.

Prednosti knjižnica nestiliziranih komponenti

Evo nekih od prednosti korištenja nestiliziranih biblioteka komponenti:

• Potpuna kontrola nad stylingom: Biblioteke komponenti bez stila daju vam potpunu kontrolu nad izgledom vaših komponenti. Možete koristiti bilo koji CSS ili stilski okvir za prilagodbu komponenti prema vašim potrebama.
• Ubrzati razvoj: Biblioteke komponenti bez stila mogu vam pomoći da ubrzate razvoj pružanjem skupa unaprijed izgrađenih komponenti koje možete koristiti u svojoj aplikaciji.
• Jednostavan za održavanje: Biblioteke komponenti bez stila lako je održavati jer nisu usko povezane s bilo kojim specifičnim okvirom za stiliziranje. To znači da možete jednostavno ažurirati stil bez izmjena u osnovnom kodu.

Radix UI je biblioteka komponenti bez stila koja se fokusira na pristupačnost. Omogućuje skup komponenti korisničkog sučelja dizajniranih da budu dostupne svim korisnicima. Možeš izradite prekrasne React aplikacije koristeći Radix UI.

Kada radite s Radix UI, možete instalirati pojedinačne komponente koje su vam potrebne umjesto cijele biblioteke. To osigurava da vaša aplikacija bude lagana.

Na primjer, ako trebate samo komponentu harmonike, možete je instalirati u svoju aplikaciju pokretanjem sljedeće naredbe:

npm install @radix-ui/react-accordion

Nakon instaliranja komponente harmonike, možete kreirati harmonike u svojoj React aplikaciji.

Evo primjera kako koristiti komponentu harmonike:

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

Gore navedeni blok koda postavlja osnovnu nestiliziranu komponentu harmonike pomoću @radix-ui/react-accordion knjižnica, koja omogućuje sklopive stavke s prilagodljivim sadržajem.

Kod će generirati harmoniku koja izgleda ovako:

Biblioteka React Aria skup je kukica za izgradnju korisničkih sučelja u Reactu. Knjižnica olakšava stvaranje pristupačnih web aplikacija pružajući zbirku komponenti koje slijede najbolje prakse za pristupačnost.

Adobe je razvio i održava biblioteku React Aria. Knjižnica je dio opsežnijeg Adobe Spectrum Design Systema koji pruža sveobuhvatan skup smjernica za dizajn i resursa za izgradnju pristupačnih korisničkih sučelja. Elementi koje pruža biblioteka React Aria nisu stilizirani, što vam omogućuje da prilagodite elemente svojim potrebama.

Da biste koristili React Aria u svojoj React aplikaciji, instalirajte je pokretanjem sljedeće naredbe:

npm install react-aria

Ovdje je primjer kako stvoriti komponentu gumba pomoću useButton kuka:

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;

Sada možete uvesti i prikazati dugme komponentu u bilo kojoj drugoj komponenti koju odaberete.

Na primjer:

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

Kada renderirate gornji blok koda, on će generirati jednostavan gumb koji izgleda ovako:

Ako vam nije ugodno koristiti React Aria zbog kukica, upotrijebite React Aria komponente knjižnica umjesto toga. Ova biblioteka pruža unaprijed izgrađene komponente koje su dostupne prema zadanim postavkama. To je tanak sloj na vrhu React Aria biblioteke. Priložene komponente nisu stilizirane, tako da su dvije biblioteke vrlo slične.

Base UI je React UI biblioteka bez stila koja pruža komponente korisničkog sučelja bez stiliziranja. Tim Material UI stvorio je Base UI sa skupom temeljnih komponenti koje možete koristiti za izradu vlastitih prilagođenih React aplikacija. Na istom su temeljili biblioteku Base UI robusno inženjerstvo kao korisničko sučelje materijala, ali Base UI ne implementira materijalni dizajn.

Možete instalirati Base UI u svoju React aplikaciju ovom naredbom:

npm install @mui/base

Base UI pruža komponente u pokretu, što znači da možete izravno uvoziti i koristiti komponente iz biblioteke. Također nudi spojnice koje možete koristiti za izradu i konfiguraciju svojih komponenti.

Evo primjera korištenja komponenti Base UI:

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


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

Ovaj kod generira jednostavan gumb pomoću Dugme komponenta knjižnice Base UI. Također možete koristiti useButton kuka za obavljanje istog zadatka.

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


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

The useButton kuka i Dugme komponenta će generirati gumb bez stila, kao što je prikazano na slici ispod.

Još jedna biblioteka koju možete istražiti je Headless UI, koja nudi elemente korisničkog sučelja bez stila, dajući vam slobodu da prilagodite izgled i ponašanje svojih komponenti korisničkog sučelja kako vam odgovara.

Možete instalirati biblioteku pomoću sljedeće naredbe:

npm install @headlessui/react

Nakon instaliranja biblioteke, možete koristiti nekoliko komponenti koje biblioteka pruža u vašoj React aplikaciji.

Na primjer:

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




Popover</Popover.Button>

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

U ovom primjeru kreirate skočni prozor pomoću Popover komponenta iz biblioteke Headless UI. Gornji blok koda će generirati skočni prozor koji izgleda ovako.

Dobijte potpunu kontrolu s nestiliziranim komponentama

Nestilizirane biblioteke komponenti daju vam potpunu kontrolu nad stilom vaše React aplikacije, omogućujući vam stvaranje jedinstvenih korisničkih iskustava. Ove biblioteke nude niz opcija koje odgovaraju vašim potrebama. Možete stvoriti vizualno privlačne i vrlo prilagodljive React aplikacije koristeći gore navedene biblioteke.