4 labākās bezstilizētās komponentu bibliotēkas pielāgojamu reaģēšanas lietotņu izveidei

Varat izmantot komponentu bibliotēkas, kas nodrošina iepriekš izveidotus, veidotus elementus, lai vienkāršotu React lietotņu izstrādes procesu. Šīs bibliotēkas var ietaupīt daudz laika un pūļu, taču tās var arī ierobežot jūsu kontroli pār jūsu lietotnes stilu. Ja jums ir nepieciešama lielāka kontrole pār savu React lietotņu stilu, apsveriet iespēju izmantot bezstilu komponentu bibliotēku.

Kas ir bezstilētu komponentu bibliotēkas?

Bezstilēta sastāvdaļa bibliotēkas tiek izmantotas, lai izstrādātu pieejamas React lietojumprogrammas. Tās ir atkārtoti lietojamu lietotāja saskarnes komponentu kolekcijas bez iepriekš definētiem stiliem. Tie nodrošina lietotāja interfeisa elementu pamatstruktūru bez jebkāda stila. Tas sniedz jums pilnīgu kontroli pār to, kā jūsu komponenti izskatās un darbojas.

Bezstilētu komponentu bibliotēku priekšrocības

Šeit ir dažas priekšrocības, ko sniedz bezstilētu komponentu bibliotēku izmantošana.

• Pilnīga stila kontrole: Nestimulētas komponentu bibliotēkas sniedz jums pilnīgu kontroli pār to, kā jūsu komponenti izskatās. Varat izmantot jebkuru CSS vai stila sistēmu, lai pielāgotu komponentus atbilstoši savām vajadzībām.
• Paātrināt attīstību: nestilizētas komponentu bibliotēkas var palīdzēt paātrināt izstrādi, nodrošinot iepriekš izveidotu komponentu kopu, ko varat izmantot savā lietotnē.
• Viegli kopjams: Nestilizētas komponentu bibliotēkas ir viegli uzturēt, jo tās nav cieši saistītas ar kādu konkrētu stila ietvaru. Tas nozīmē, ka varat viegli atjaunināt stilu, neveicot izmaiņas pamatā esošajā kodā.

Radix UI ir bez stila komponentu bibliotēka, kas koncentrējas uz pieejamību. Tas nodrošina lietotāja interfeisa komponentu kopu, kas paredzēts visiem lietotājiem. Jūs varat izveidojiet skaistas React lietotnes, izmantojot Radix UI.

Strādājot ar Radix UI, varat instalēt atsevišķus nepieciešamos komponentus, nevis visu bibliotēku. Tas nodrošina, ka jūsu lietojumprogramma ir viegla.

Piemēram, ja jums ir nepieciešams tikai akordeona komponents, varat to instalēt savā lietojumprogrammā, izpildot šādu komandu:

npm install @radix-ui/react-accordion

Pēc akordeona komponenta instalēšanas varat izveidot akordeonus savā React lietotnē.

Šeit ir piemērs, kā izmantot akordeona 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>
 )
}

Iepriekš minētais koda bloks iestata pamata nestila akordeona komponentu, izmantojot @radix-ui/react-accordion bibliotēka, kas ļauj ievietot saliekamus vienumus ar pielāgojamu saturu.

Kods ģenerēs akordeonu, kas izskatās šādi:

React Aria bibliotēka ir āķu komplekts lietotāja saskarņu izveidei programmā React. Bibliotēka atvieglo pieejamu tīmekļa lietojumprogrammu izveidi, nodrošinot komponentu kolekciju, kas atbilst pieejamības paraugpraksei.

Adobe izstrādāja un uztur React Aria bibliotēku. Bibliotēka ir daļa no plašākas Adobe Spectrum Design System, kas nodrošina visaptverošu dizaina vadlīniju un resursu kopumu pieejamu lietotāja saskarņu izveidei. React Aria bibliotēkas nodrošinātie elementi ir bez stila, ļaujot pielāgot elementus atbilstoši savām vajadzībām.

Lai savā React lietojumprogrammā izmantotu React Aria, instalējiet to, izpildot šādu komandu:

npm install react-aria

Šeit ir piemērs, kā izveidot pogas komponentu, izmantojot UseButton āķis:

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;

Tagad jūs varat importēt un renderēt pogu komponents jebkurā citā jūsu izvēlētā komponentā.

Piemēram:

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

Atveidojot iepriekš minēto koda bloku, tas ģenerēs vienkāršu pogu, kas izskatās šādi:

Ja jums ir neērti lietot React Aria āķu dēļ, izmantojiet Reaģējiet uz Aria komponentiem bibliotēku. Šī bibliotēka nodrošina iepriekš izveidotus komponentus, kas ir pieejami pēc noklusējuma. Tas ir plāns slānis virs React Aria bibliotēkas. Piedāvātie komponenti ir bez stila, tāpēc abas bibliotēkas ir ļoti līdzīgas.

Pamata lietotāja interfeiss ir bez stila React UI bibliotēka, kas nodrošina lietotāja interfeisa komponentus bez stila. Material UI komanda izveidoja pamata lietotāja interfeisu ar pamata komponentu kopu, ko varat izmantot, lai izveidotu savas pielāgotās React lietotnes. Viņi balstīja uz to pašu Base UI bibliotēku izturīga inženierija kā materiāla lietotāja saskarne, bet Base UI neievieš materiālu dizainu.

Jūs varat instalēt Base UI savā React lietojumprogrammā ar šo komandu:

npm install @mui/base

Pamata lietotāja interfeiss nodrošina komponentus, atrodoties ceļā, kas nozīmē, ka varat tieši importēt un izmantot komponentus no bibliotēkas. Tas nodrošina arī āķus, ko varat izmantot, lai izveidotu un konfigurētu savus komponentus.

Šeit ir Base UI komponentu izmantošanas piemērs:

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


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

Šis kods ģenerē vienkāršu pogu, izmantojot Poga pamata lietotāja interfeisa bibliotēkas sastāvdaļa. Varat arī izmantot UseButton āķis, lai veiktu to pašu uzdevumu.

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


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

The UseButton āķis un Poga komponents ģenerēs nestiilētu pogu, kā parādīts tālāk esošajā attēlā.

Vēl viena bibliotēka, ko varat izpētīt, ir bezgaldīgs lietotāja interfeiss, kas piedāvā nestilētus lietotāja interfeisa elementus, sniedzot jums brīvību pielāgot lietotāja interfeisa komponentu izskatu un darbību pēc saviem ieskatiem.

Bibliotēku var instalēt, izmantojot šādu komandu:

npm install @headlessui/react

Pēc bibliotēkas instalēšanas varat izmantot vairākus komponentus, ko bibliotēka nodrošina savā React lietojumprogrammā.

Piemēram:

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




Popover</Popover.Button>

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

Šajā piemērā jūs izveidojat uznirstošo logu, izmantojot Popover komponents no Headless UI bibliotēkas. Iepriekš minētais koda bloks ģenerēs uznirstošo logu, kas izskatās šādi.

Iegūstiet pilnīgu kontroli, izmantojot bez stila komponentus

Nestilizētās komponentu bibliotēkas sniedz jums pilnīgu kontroli pār React lietojumprogrammas stilu, ļaujot jums izveidot unikālu lietotāja pieredzi. Šīs bibliotēkas piedāvā virkni iespēju, kas atbilst jūsu vajadzībām. Varat izveidot vizuāli pievilcīgas un ļoti pielāgojamas React lietojumprogrammas, izmantojot iepriekš minētās bibliotēkas.