4 beste ustilte komponentbiblioteker for å bygge tilpassbare React-apper

Du kan bruke komponentbiblioteker som gir forhåndsbygde, stylede elementer for å forenkle utviklingsprosessen for React-apper. Disse bibliotekene kan spare mye tid og krefter, men de kan også begrense kontrollen din over stilen til appen din. Hvis du trenger mer kontroll over stilen til React-appene dine, bør du vurdere å bruke et ustilt komponentbibliotek.

Hva er ustilte komponentbiblioteker?

Ustilt komponent biblioteker brukes til å utvikle tilgjengelige React-applikasjoner. De er samlinger av gjenbrukbare UI-komponenter uten forhåndsdefinerte stiler. De gir deg den grunnleggende strukturen til UI-elementer uten styling. Dette gir deg full kontroll over hvordan komponentene dine ser ut og føles.

Fordeler med ustilte komponentbiblioteker

Her er noen av fordelene ved å bruke ustilte komponentbiblioteker:

• Full kontroll over stylingen: Ustilte komponentbiblioteker gir deg full kontroll over hvordan komponentene dine ser ut. Du kan bruke hvilken som helst CSS- eller stylingramme for å tilpasse komponentene til dine behov.
  instagram viewer
• Få fart på utviklingen: Ustilte komponentbiblioteker kan hjelpe deg med å fremskynde utviklingen ved å tilby et sett med forhåndsbygde komponenter du kan bruke i appen din.
• Enkel å vedlikeholde: Ustilte komponentbiblioteker er enkle å vedlikeholde fordi de ikke er tett koblet til noe spesifikt stylingrammeverk. Dette betyr at du enkelt kan oppdatere stylingen uten å gjøre endringer i den underliggende koden.

Radix UI er et ustilt komponentbibliotek som fokuserer på tilgjengelighet. Den gir et sett med UI-komponenter designet for å være tilgjengelig for alle brukere. Du kan bygg vakre React-apper ved hjelp av Radix UI.

Når du arbeider med Radix UI, kan du installere de individuelle komponentene du trenger i stedet for hele biblioteket. Dette sikrer at du holder applikasjonen lett.

Hvis du for eksempel bare trenger en trekkspillkomponent, kan du installere den i applikasjonen din ved å kjøre følgende kommando:

npm install @radix-ui/react-accordion

Etter å ha installert trekkspillkomponenten, kan du lage trekkspill i React-appen din.

Her er et eksempel på hvordan du bruker trekkspillkomponenten:

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

Kodeblokken ovenfor setter opp en grunnleggende ustilt trekkspillkomponent ved å bruke @radix-ui/react-trekkspill bibliotek, som tillater sammenleggbare elementer med tilpassbart innhold.

Koden vil generere et trekkspill som ser slik ut:

React Aria-biblioteket er et sett med kroker for å bygge brukergrensesnitt i React. Biblioteket gjør det enklere å lage tilgjengelige nettapplikasjoner ved å tilby en samling komponenter som følger beste praksis for tilgjengelighet.

Adobe utviklet og vedlikeholder React Aria-biblioteket. Biblioteket er en del av det mer omfattende Adobe Spectrum Design System, som gir et omfattende sett med designretningslinjer og ressurser for å bygge tilgjengelige brukergrensesnitt. Elementene som tilbys av React Aria-biblioteket er ustilte, slik at du kan tilpasse elementene til dine behov.

For å bruke React Aria i React-applikasjonen din, installer den ved å kjøre følgende kommando:

npm install react-aria

Her er et eksempel på hvordan du oppretter en knappekomponent ved hjelp av brukknapp krok:

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;

Nå kan du importere og gjengi knapp komponent i en hvilken som helst annen komponent du velger.

For eksempel:

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

Når du gjengir kodeblokken ovenfor, vil den generere en enkel knapp som ser slik ut:

Hvis du er ukomfortabel med å bruke React Aria på grunn av krokene, bruk Reager Aria-komponenter bibliotek i stedet. Dette biblioteket har forhåndsbygde komponenter som er tilgjengelige som standard. Det er et tynt lag på toppen av React Aria-biblioteket. Komponentene som følger med er ustilte, så de to bibliotekene er veldig like.

Base UI er et ustilt React UI-bibliotek som gir UI-komponenter uten styling. Material UI-teamet opprettet Base UI med et sett med grunnleggende komponenter du kan bruke til å bygge dine egne tilpassede React-apper. De baserte Base UI-biblioteket på det samme robust konstruksjon som Material UI, men Base UI implementerer ikke Material Design.

Du kan installere Base UI i React-applikasjonen din med denne kommandoen:

npm install @mui/base

Base UI gir komponenter mens du er på farten, noe som betyr at du kan importere og bruke komponenter direkte fra biblioteket. Den har også kroker som du kan bruke til å lage og konfigurere komponentene dine.

Her er et eksempel på bruk av Base UI-komponenter:

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


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

Denne koden genererer en enkel knapp ved å bruke Knapp komponent i Base UI-biblioteket. Du kan også bruke brukknapp krok for å utføre samme oppgave.

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


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

De brukknapp krok og Knapp komponent vil generere en ustilt knapp, som vist på bildet nedenfor.

Et annet bibliotek du kan utforske er Headless UI, som tilbyr ustilte UI-elementer, noe som gir deg friheten til å tilpasse utseendet og oppførselen til UI-komponentene dine slik det passer deg.

Du kan installere biblioteket ved å bruke følgende kommando:

npm install @headlessui/react

Etter at du har installert biblioteket, kan du bruke de flere komponentene biblioteket tilbyr i din React-applikasjon.

For eksempel:

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




Popover</Popover.Button>

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

I dette eksemplet lager du en popover ved å bruke Stikke innom komponent fra Headless UI-biblioteket. Kodeblokken ovenfor vil generere en popover som ser slik ut.

Få full kontroll med ustilte komponenter

Ustilte komponentbiblioteker gir deg full kontroll over stilen til React-applikasjonen din, slik at du kan skape unike brukeropplevelser. Disse bibliotekene tilbyr en rekke alternativer for å passe dine behov. Du kan lage visuelt tiltalende og svært tilpassbare React-applikasjoner ved å utnytte bibliotekene nevnt ovenfor.