4 najboljše knjižnice komponent brez sloga za gradnjo prilagodljivih aplikacij React

Uporabite lahko knjižnice komponent, ki zagotavljajo vnaprej zgrajene, stilizirane elemente, da poenostavite razvojni proces za aplikacije React. Te knjižnice lahko prihranijo veliko časa in truda, lahko pa tudi omejijo vaš nadzor nad slogom vaše aplikacije. Če potrebujete več nadzora nad slogom svojih aplikacij React, razmislite o uporabi knjižnice komponent brez sloga.

Kaj so knjižnice komponent brez sloga?

Komponenta brez sloga knjižnice se uporabljajo za razvoj dostopnih aplikacij React. So zbirke komponent uporabniškega vmesnika za večkratno uporabo brez vnaprej določenih slogov. Zagotavljajo vam osnovno strukturo elementov uporabniškega vmesnika brez oblikovanja. To vam omogoča popoln nadzor nad tem, kako izgledajo in se počutijo vaše komponente.

Prednosti knjižnic neslogovnih komponent

Tukaj je nekaj prednosti uporabe neslogovnih knjižnic komponent:

• Popoln nadzor nad stiliranjem
  instagram viewer
  : Knjižnice komponent brez sloga vam omogočajo popoln nadzor nad videzom komponent. Uporabite lahko kateri koli CSS ali ogrodje sloga, da prilagodite komponente svojim potrebam.
• Pospeši razvoj: Knjižnice komponent brez sloga vam lahko pomagajo pospešiti razvoj z zagotavljanjem nabora vnaprej izdelanih komponent, ki jih lahko uporabite v svoji aplikaciji.
• Enostaven za vzdrževanje: Knjižnice komponent brez stilov je enostavno vzdrževati, ker niso tesno povezane z nobenim specifičnim okvirjem stilov. To pomeni, da lahko preprosto posodobite slog, ne da bi spremenili osnovno kodo.

Radix UI je knjižnica komponent brez sloga, ki se osredotoča na dostopnost. Ponuja nabor komponent uporabniškega vmesnika, zasnovanih tako, da so dostopne vsem uporabnikom. Ti lahko ustvarite čudovite aplikacije React z uporabniškim vmesnikom Radix.

Pri delu z uporabniškim vmesnikom Radix lahko namesto celotne knjižnice namestite posamezne komponente, ki jih potrebujete. To zagotavlja, da vaša aplikacija ostane lahka.

Na primer, če potrebujete samo komponento harmonike, jo lahko namestite v svojo aplikacijo tako, da zaženete naslednji ukaz:

npm install @radix-ui/react-accordion

Po namestitvi komponente harmonike lahko ustvarite harmonike v svoji aplikaciji React.

Tu je primer uporabe komponente 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>
 )
}

Zgornji blok kode nastavi osnovno komponento harmonike brez sloga z uporabo @radix-ui/react-accordion knjižnica, ki omogoča zložljive elemente s prilagodljivo vsebino.

Koda bo ustvarila harmoniko, ki je videti takole:

Knjižnica React Aria je nabor kavljev za gradnjo uporabniških vmesnikov v Reactu. Knjižnica olajša ustvarjanje dostopnih spletnih aplikacij z zagotavljanjem zbirke komponent, ki sledijo najboljšim praksam za dostopnost.

Adobe je razvil in vzdržuje knjižnico React Aria. Knjižnica je del obsežnejšega sistema Adobe Spectrum Design System, ki ponuja obsežen nabor oblikovalskih smernic in virov za izdelavo dostopnih uporabniških vmesnikov. Elementi, ki jih ponuja knjižnica React Aria, niso oblikovani, kar vam omogoča, da elemente prilagodite svojim potrebam.

Če želite uporabiti React Aria v svoji aplikaciji React, jo namestite tako, da zaženete naslednji ukaz:

npm install react-aria

Tukaj je primer, kako ustvariti komponento gumba z uporabo useButton kavelj:

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;

Zdaj lahko uvozite in upodabljate gumb komponento v kateri koli drugi komponenti, ki jo izberete.

Na primer:

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

Ko upodabljate zgornji blok kode, bo ustvaril preprost gumb, ki je videti takole:

Če vam je uporaba React Aria neprijetna zaradi kavljev, uporabite Komponente React Aria knjižnico namesto tega. Ta knjižnica ponuja vnaprej zgrajene komponente, ki so privzeto dostopne. Je tanek sloj na vrhu knjižnice React Aria. Zagotovljene komponente niso oblikovane, zato sta si knjižnici zelo podobni.

Base UI je neslogovana knjižnica uporabniškega vmesnika React, ki zagotavlja komponente uporabniškega vmesnika brez oblikovanja. Ekipa materialnega uporabniškega vmesnika je ustvarila osnovni uporabniški vmesnik z naborom osnovnih komponent, ki jih lahko uporabite za izdelavo lastnih aplikacij React po meri. Na istem so osnovali knjižnico Base UI robusten inženiring kot Material UI, vendar osnovni uporabniški vmesnik ne izvaja materialnega oblikovanja.

Base UI lahko namestite v svojo aplikacijo React s tem ukazom:

npm install @mui/base

Base UI zagotavlja komponente na poti, kar pomeni, da lahko neposredno uvozite in uporabljate komponente iz knjižnice. Ponuja tudi kljuke, ki jih lahko uporabite za ustvarjanje in konfiguriranje komponent.

Tukaj je primer uporabe komponent uporabniškega vmesnika Base:

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


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

Ta koda ustvari preprost gumb z uporabo Gumb komponento knjižnice Base UI. Uporabite lahko tudi useButton kavelj za opravljanje iste naloge.

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


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

The useButton kavelj in Gumb bo ustvaril gumb brez stila, kot je prikazano na spodnji sliki.

Druga knjižnica, ki jo lahko raziščete, je Headless UI, ki ponuja elemente uporabniškega vmesnika brez sloga, kar vam daje svobodo prilagajanja videza in obnašanja komponent uporabniškega vmesnika, kot se vam zdi primerno.

Knjižnico lahko namestite z naslednjim ukazom:

npm install @headlessui/react

Po namestitvi knjižnice lahko uporabite več komponent, ki jih knjižnica ponuja v vaši aplikaciji React.

Na primer:

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




Popover</Popover.Button>

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

V tem primeru ustvarite popover z uporabo Popover komponento iz knjižnice Headless UI. Zgornji blok kode bo ustvaril pojavni pojav, ki je videti takole.

Zagotovite si popoln nadzor z neoblikovanimi komponentami

Knjižnice komponent brez sloga vam omogočajo popoln nadzor nad slogom vaše aplikacije React, kar vam omogoča ustvarjanje edinstvenih uporabniških izkušenj. Te knjižnice ponujajo vrsto možnosti, ki ustrezajo vašim potrebam. Z uporabo zgoraj omenjenih knjižnic lahko ustvarite vizualno privlačne in zelo prilagodljive aplikacije React.