4 parasta tyylitöntä komponenttikirjastoa mukautettavien React-sovellusten rakentamiseen

Voit käyttää komponenttikirjastoja, jotka tarjoavat valmiiksi rakennettuja tyyliteltyjä elementtejä yksinkertaistamaan React-sovellusten kehitysprosessia. Nämä kirjastot voivat säästää paljon aikaa ja vaivaa, mutta ne voivat myös rajoittaa sovelluksesi tyylin hallintaasi. Jos tarvitset enemmän React-sovellustesi tyylin hallintaa, harkitse tyylittömän komponenttikirjaston käyttöä.

Mitä ovat tyylittömien komponenttien kirjastot?

Tyylitön komponentti kirjastoja käytetään saavutettavien React-sovellusten kehittämiseen. Ne ovat kokoelmia uudelleenkäytettävistä käyttöliittymäkomponenteista ilman ennalta määritettyjä tyylejä. Ne tarjoavat sinulle käyttöliittymäelementtien perusrakenteen ilman tyyliä. Tämä antaa sinulle täydellisen hallinnan siihen, miltä komponentit näyttävät ja tuntuvat.

Tyylittömien komponenttien kirjastojen edut

Tässä on joitain tyylittömien komponenttikirjastojen käytön etuja:

• Täydellinen tyylin hallinta: Tyylittömät komponenttikirjastot antavat sinulle täyden hallinnan siihen, miltä komponentit näyttävät. Voit käyttää mitä tahansa CSS- tai muotoilukehystä mukauttaaksesi komponentteja tarpeitasi vastaaviksi.
• Nopeuta kehitystä: Tyylittömät komponenttikirjastot voivat auttaa sinua nopeuttamaan kehitystä tarjoamalla joukon valmiita komponentteja, joita voit käyttää sovelluksessasi.
• Helppo huoltaa: Tyylittömiä komponenttikirjastoja on helppo ylläpitää, koska niitä ei ole liitetty tiukasti mihinkään tiettyyn tyylikehykseen. Tämä tarkoittaa, että voit helposti päivittää tyylin tekemättä muutoksia taustalla olevaan koodiin.

Radix UI on tyylitön komponenttikirjasto, joka keskittyy saavutettavuuteen. Se tarjoaa joukon käyttöliittymäkomponentteja, jotka on suunniteltu kaikkien käyttäjien saataville. Sinä pystyt rakentaa kauniita React-sovelluksia Radix UI: n avulla.

Kun työskentelet Radix UI: n kanssa, voit asentaa tarvitsemasi yksittäiset komponentit koko kirjaston sijaan. Tämä varmistaa, että pidät sovelluksesi kevyenä.

Jos esimerkiksi tarvitset vain harmonikkakomponentin, voit asentaa sen sovellukseesi suorittamalla seuraavan komennon:

npm install @radix-ui/react-accordion

Kun olet asentanut haitarikomponentin, voit luoda haitareita React-sovelluksessasi.

Tässä on esimerkki harmonikkakomponentin käytöstä:

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

Yllä oleva koodilohko määrittää tyylittömän perus harmonikkakomponentin käyttämällä @radix-ui/react-accordion kirjasto, joka mahdollistaa kokoontaitettavat kohteet muokattavalla sisällöllä.

Koodi luo harmonikon, joka näyttää tältä:

React Aria -kirjasto on joukko koukkuja käyttöliittymien rakentamiseen Reactissa. Kirjasto helpottaa esteettömän verkkosovellusten luomista tarjoamalla kokoelman osia, jotka noudattavat saavutettavuuden parhaita käytäntöjä.

Adobe on kehittänyt ja ylläpitää React Aria -kirjastoa. Kirjasto on osa laajempaa Adobe Spectrum Design System -järjestelmää, joka tarjoaa kattavat suunnitteluohjeet ja resurssit helppokäyttöisten käyttöliittymien rakentamiseen. React Aria -kirjaston tarjoamat elementit ovat tyylittämättömiä, joten voit muokata elementtejä tarpeidesi mukaan.

Jos haluat käyttää React Ariaa React-sovelluksessasi, asenna se suorittamalla seuraava komento:

npm install react-aria

Tässä on esimerkki painikekomponentin luomisesta käyttämällä useButton koukku:

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;

Nyt voit tuoda ja renderöidä -painiketta komponenttia missä tahansa muussa valitsemassasi osassa.

Esimerkiksi:

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

Kun teet yllä olevan koodilohkon, se luo yksinkertaisen painikkeen, joka näyttää tältä:

Jos React Arian käyttö tuntuu epämukavalta koukkujen takia, käytä React Aria Components kirjaston sijaan. Tämä kirjasto tarjoaa valmiiksi rakennetut komponentit, jotka ovat käytettävissä oletuksena. Se on ohut kerros React Aria -kirjaston päällä. Toimitetut komponentit ovat tyylittämättömiä, joten nämä kaksi kirjastoa ovat hyvin samankaltaisia.

Peruskäyttöliittymä on tyylitön React UI -kirjasto, joka tarjoaa käyttöliittymäkomponentteja ilman tyyliä. Material UI -tiimi loi Base UI: n joukolla peruskomponentteja, joiden avulla voit rakentaa omia mukautettuja React-sovelluksiasi. He perustivat Base UI -kirjaston samaan vankka suunnittelu materiaalikäyttöliittymänä, mutta peruskäyttöliittymä ei toteuta materiaalisuunnittelua.

Voit asentaa Base UI: n React-sovellukseesi tällä komennolla:

npm install @mui/base

Base UI tarjoaa komponentteja liikkeellä ollessasi, mikä tarkoittaa, että voit tuoda ja käyttää komponentteja suoraan kirjastosta. Siinä on myös koukut, joita voit käyttää komponenttien luomiseen ja konfigurointiin.

Tässä on esimerkki Base UI -komponenttien käytöstä:

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


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

Tämä koodi luo yksinkertaisen painikkeen käyttämällä Painike Base UI -kirjaston osa. Voit myös käyttää useButton koukku suorittaaksesi saman tehtävän.

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


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

The useButton koukku ja Painike komponentti luo tyylittömän painikkeen, kuten alla olevassa kuvassa näkyy.

Toinen tutkittava kirjasto on Headless UI, joka tarjoaa tyylittelemättömiä käyttöliittymäelementtejä, jotka antavat sinulle vapauden muokata käyttöliittymäkomponenttien ulkoasua ja toimintaa parhaaksi katsomallasi tavalla.

Voit asentaa kirjaston seuraavalla komennolla:

npm install @headlessui/react

Kirjaston asennuksen jälkeen voit käyttää useita kirjaston tarjoamia komponentteja React-sovelluksessasi.

Esimerkiksi:

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




Popover</Popover.Button>

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

Tässä esimerkissä luot ponnahdusikkunan käyttämällä Popover komponentti Headless UI -kirjastosta. Yllä oleva koodilohko luo ponnahdusikkunan, joka näyttää tältä.

Saat täydellisen hallinnan tyylittömillä komponenteilla

Tyylittömät komponenttikirjastot antavat sinulle täydellisen hallinnan React-sovelluksesi tyyliin, jolloin voit luoda ainutlaatuisia käyttökokemuksia. Nämä kirjastot tarjoavat erilaisia ​​vaihtoehtoja tarpeisiisi. Voit luoda visuaalisesti houkuttelevia ja erittäin muokattavia React-sovelluksia hyödyntämällä yllä mainittuja kirjastoja.