4 geriausios nestilių komponentų bibliotekos, skirtos pritaikytoms React programoms kurti

Norėdami supaprastinti „React“ programų kūrimo procesą, galite naudoti komponentų bibliotekas, kuriose pateikiami iš anksto sukurti stiliaus elementai. Šios bibliotekos gali sutaupyti daug laiko ir pastangų, tačiau jos taip pat gali apriboti jūsų programos stiliaus valdymą. Jei reikia daugiau valdyti „React“ programų stilių, apsvarstykite galimybę naudoti nestilių komponentų biblioteką.

Kas yra nestilių komponentų bibliotekos?

Nestiiliuotas komponentas bibliotekos naudojamos kuriant prieinamas „React“ programas. Tai daugkartinio naudojimo vartotojo sąsajos komponentų rinkiniai be iš anksto nustatytų stilių. Jie suteikia jums pagrindinę vartotojo sąsajos elementų struktūrą be jokio stiliaus. Tai suteikia jums visišką kontrolę, kaip atrodo ir veikia jūsų komponentai.

Nestilių komponentų bibliotekų pranašumai

Štai keletas nestilių komponentų bibliotekų naudojimo pranašumų:

• Visiška stiliaus kontrolė
  instagram viewer
  : Nestiliautos komponentų bibliotekos suteikia jums galimybę visiškai valdyti, kaip atrodo jūsų komponentai. Galite naudoti bet kurią CSS arba stiliaus sistemą, kad pritaikytumėte komponentus pagal savo poreikius.
• Paspartinkite plėtrą: Nestiliautos komponentų bibliotekos gali padėti paspartinti kūrimą suteikdamos iš anksto sukurtų komponentų rinkinį, kurį galite naudoti programoje.
• Lengva prižiūrėti: Nesudėtingas komponentų bibliotekas lengva prižiūrėti, nes jos nėra glaudžiai susietos su jokia konkrečia stiliaus sistema. Tai reiškia, kad galite lengvai atnaujinti stilių nekeisdami pagrindinio kodo.

„Radix UI“ yra nestilių komponentų biblioteka, kurioje pagrindinis dėmesys skiriamas prieinamumui. Jame pateikiamas UI komponentų rinkinys, sukurtas taip, kad būtų pasiekiamas visiems vartotojams. Tu gali kurkite gražias „React“ programas naudodami „Radix“ vartotojo sąsają.

Dirbdami su Radix vartotojo sąsaja galite įdiegti atskirus jums reikalingus komponentus, o ne visą biblioteką. Tai užtikrina, kad jūsų programa bus lengva.

Pavyzdžiui, jei jums reikia tik akordeono komponento, galite jį įdiegti savo programoje vykdydami šią komandą:

npm install @radix-ui/react-accordion

Įdiegę akordeono komponentą galite kurti akordeonus programėlėje React.

Štai pavyzdys, kaip naudoti akordeono komponentą:

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

Aukščiau pateiktame kodo bloke nustatomas pagrindinis nestiiliuotas akordeono komponentas, naudojant @radix-ui/react-accordion biblioteka, leidžianti suskleisti elementus su tinkinamu turiniu.

Kodas sukurs akordeoną, kuris atrodys taip:

„React Aria“ biblioteka yra „React“ vartotojo sąsajų kūrimo kabliukų rinkinys. Biblioteka leidžia lengviau kurti prieinamas žiniatinklio programas, nes pateikia komponentų rinkinį, atitinkantį geriausią prieinamumo praktiką.

„Adobe“ sukūrė ir prižiūri „React Aria“ biblioteką. Biblioteka yra platesnės „Adobe Spectrum Design System“ dalis, kurioje pateikiamas išsamus projektavimo gairių ir išteklių, skirtų prieinamoms vartotojo sąsajoms kurti, rinkinys. „React Aria“ bibliotekos pateikti elementai yra nesuderinami, todėl galite tinkinti elementus, kad atitiktų jūsų poreikius.

Norėdami naudoti React Aria savo React programoje, įdiekite ją vykdydami šią komandą:

npm install react-aria

Štai pavyzdys, kaip sukurti mygtuko komponentą naudojant UseButton kabliukas:

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;

Dabar galite importuoti ir pateikti mygtuką komponentas bet kuriame kitame pasirinktame komponente.

Pavyzdžiui:

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

Kai pateiksite aukščiau esantį kodo bloką, jis sugeneruos paprastą mygtuką, kuris atrodo taip:

Jei jums nepatogu naudoti React Aria dėl kabliukų, naudokite Reaguoti Aria komponentus vietoj to biblioteka. Šioje bibliotekoje pateikiami iš anksto sukurti komponentai, kurie pasiekiami pagal numatytuosius nustatymus. Tai plonas sluoksnis ant React Aria bibliotekos. Pateikti komponentai yra be stiliaus, todėl abi bibliotekos yra labai panašios.

Bazinė vartotojo sąsaja yra be stiliaus „React UI“ biblioteka, kurioje pateikiami vartotojo sąsajos komponentai be stiliaus. Material UI komanda sukūrė bazinę vartotojo sąsają su pagrindinių komponentų rinkiniu, kurį galite naudoti kurdami savo pasirinktines „React“ programas. Jie pagrindė bazinės vartotojo sąsajos biblioteką tuo pačiu tvirta inžinerija kaip medžiagos vartotojo sąsaja, bet pagrindinė vartotojo sąsaja neįgyvendina medžiagų dizaino.

Galite įdiegti bazinę vartotojo sąsają savo React programoje naudodami šią komandą:

npm install @mui/base

Pagrindinė vartotojo sąsaja teikia komponentus keliaujant, o tai reiškia, kad galite tiesiogiai importuoti ir naudoti komponentus iš bibliotekos. Jame taip pat yra kabliukų, kuriuos galite naudoti kurdami ir konfigūruodami savo komponentus.

Štai Base UI komponentų naudojimo pavyzdys:

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


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

Šis kodas sugeneruoja paprastą mygtuką, naudodamas Mygtukas Bazinės vartotojo sąsajos bibliotekos komponentas. Taip pat galite naudoti UseButton kablys atlikti tą pačią užduotį.

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


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

The UseButton kabliukas ir Mygtukas komponentas sugeneruos nesuderintą mygtuką, kaip parodyta paveikslėlyje žemiau.

Kita biblioteka, kurią galite tyrinėti, yra „Headless UI“, kuri siūlo nestilius vartotojo sąsajos elementus, suteikiančius jums laisvę tinkinti vartotojo sąsajos komponentų išvaizdą ir elgesį, kaip jums atrodo tinkama.

Biblioteką galite įdiegti naudodami šią komandą:

npm install @headlessui/react

Įdiegę biblioteką, galite naudoti kelis komponentus, kuriuos biblioteka pateikia React programoje.

Pavyzdžiui:

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




Popover</Popover.Button>

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

Šiame pavyzdyje sukuriate iššokantįjį langą naudodami Popover komponentas iš Headless UI bibliotekos. Aukščiau pateiktas kodo blokas sugeneruos iššokantįjį langą, kuris atrodys taip.

Visiškai valdykite nestilius komponentus

Nestiliautos komponentų bibliotekos suteikia jums visišką React programos stiliaus kontrolę, leidžiančią sukurti unikalią vartotojo patirtį. Šios bibliotekos siūlo daugybę variantų, atitinkančių jūsų poreikius. Naudodami pirmiau minėtas bibliotekas, galite sukurti vizualiai patrauklias ir labai pritaikomas React programas.