4 beste ongestileerde componentbibliotheken voor het bouwen van aanpasbare React-apps

U kunt componentbibliotheken gebruiken die vooraf gebouwde, opgemaakte elementen bieden om het ontwikkelingsproces voor React-apps te vereenvoudigen. Deze bibliotheken kunnen veel tijd en moeite besparen, maar ze kunnen ook uw controle over de stijl van uw app beperken. Als je meer controle nodig hebt over de stijl van je React-apps, overweeg dan om een ​​componentbibliotheek zonder stijl te gebruiken.

Wat zijn niet-gestylede componentenbibliotheken?

Ongestileerd onderdeel bibliotheken worden gebruikt om toegankelijke React-applicaties te ontwikkelen. Het zijn verzamelingen herbruikbare UI-componenten zonder vooraf gedefinieerde stijlen. Ze bieden u de basisstructuur van UI-elementen zonder enige stijl. Dit geeft u volledige controle over hoe uw componenten eruitzien en aanvoelen.

Voordelen van componentenbibliotheken zonder stijl

Hier volgen enkele voordelen van het gebruik van niet-gestileerde componentbibliotheken:

• Volledige controle over de styling: Ongestileerde componentbibliotheken geven u volledige controle over hoe uw componenten eruit zien. U kunt elk CSS- of stijlframework gebruiken om de componenten aan uw behoeften aan te passen.
• Versnel de ontwikkeling: Niet-gestylede componentbibliotheken kunnen u helpen de ontwikkeling te versnellen door een reeks vooraf gebouwde componenten aan te bieden die u in uw app kunt gebruiken.
• Makkelijk te onderhouden: Niet-gestylede componentbibliotheken zijn gemakkelijk te onderhouden omdat ze niet nauw gekoppeld zijn aan een specifiek stijlframework. Dit betekent dat u de styling eenvoudig kunt bijwerken zonder wijzigingen aan te brengen in de onderliggende code.

Radix UI is een ongestylede componentenbibliotheek die zich richt op toegankelijkheid. Het biedt een reeks UI-componenten die zijn ontworpen om voor alle gebruikers toegankelijk te zijn. Jij kan bouw prachtige React-apps met behulp van Radix UI.

Wanneer u met Radix UI werkt, kunt u de afzonderlijke componenten installeren die u nodig heeft in plaats van de hele bibliotheek. Dit zorgt ervoor dat u uw applicatie lichtgewicht houdt.

Als u bijvoorbeeld alleen een accordeoncomponent nodig heeft, kunt u deze in uw toepassing installeren door de volgende opdracht uit te voeren:

npm install @radix-ui/react-accordion

Na het installeren van de accordeoncomponent kunt u accordeons maken in uw React-app.

Hier is een voorbeeld van het gebruik van de accordeoncomponent:

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

Het bovenstaande codeblok stelt een basis-ongestylede accordeoncomponent in met behulp van de @radix-ui/react-accordeon bibliotheek, waardoor inklapbare items met aanpasbare inhoud mogelijk zijn.

De code genereert een accordeon die er als volgt uitziet:

De React Aria-bibliotheek is een set hooks voor het bouwen van gebruikersinterfaces in React. De bibliotheek maakt het gemakkelijker om toegankelijke webapplicaties te maken door een verzameling componenten te bieden die de best practices voor toegankelijkheid volgen.

Adobe heeft de React Aria-bibliotheek ontwikkeld en onderhouden. De bibliotheek maakt deel uit van het uitgebreidere Adobe Spectrum Design System, dat een uitgebreide set ontwerprichtlijnen en bronnen biedt voor het bouwen van toegankelijke gebruikersinterfaces. De elementen van de React Aria-bibliotheek zijn ongestyled, waardoor u de elementen kunt aanpassen aan uw behoeften.

Om React Aria in uw React-toepassing te gebruiken, installeert u het door de volgende opdracht uit te voeren:

npm install react-aria

Hier is een voorbeeld van hoe u een knopcomponent maakt met behulp van de gebruikKnop haak:

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;

Nu kunt u het knop component in een andere component die u kiest.

Bijvoorbeeld:

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

Wanneer u het bovenstaande codeblok rendert, genereert het een eenvoudige knop die er als volgt uitziet:

Als je je niet op je gemak voelt bij het gebruik van React Aria vanwege de haken, gebruik dan de Reageer op Aria-componenten bibliotheek in plaats daarvan. Deze bibliotheek biedt vooraf gebouwde componenten die standaard toegankelijk zijn. Het is een dunne laag bovenop de React Aria-bibliotheek. De geleverde componenten zijn ongestyled, dus de twee bibliotheken lijken erg op elkaar.

Base UI is een ongestylede React UI-bibliotheek die UI-componenten biedt zonder styling. Het Material UI-team heeft de Base UI gemaakt met een reeks fundamentele componenten die u kunt gebruiken om uw eigen aangepaste React-apps te bouwen. Ze baseerden de Base UI-bibliotheek op hetzelfde robuuste engineering als materiaal-UI, maar Base UI implementeert Material Design niet.

U kunt Base UI in uw React-applicatie installeren met deze opdracht:

npm install @mui/base

Base UI biedt componenten onderweg, wat betekent dat u componenten rechtstreeks uit de bibliotheek kunt importeren en gebruiken. Het biedt ook hooks die u kunt gebruiken om uw componenten te maken en te configureren.

Hier is een voorbeeld van het gebruik van Base UI-componenten:

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


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

Deze code genereert een eenvoudige knop met behulp van de Knop onderdeel van de Base UI-bibliotheek. Je kunt ook gebruik maken van de gebruikKnop haak om dezelfde taak uit te voeren.

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


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

De gebruikKnop haak en de Knop component genereert een knop zonder stijl, zoals weergegeven in de onderstaande afbeelding.

Een andere bibliotheek die u kunt verkennen is Headless UI, die ongestylede UI-elementen biedt, waardoor u de vrijheid heeft om het uiterlijk en het gedrag van uw UI-componenten naar eigen inzicht aan te passen.

U kunt de bibliotheek installeren met behulp van de volgende opdracht:

npm install @headlessui/react

Na het installeren van de bibliotheek kunt u de verschillende componenten die de bibliotheek biedt, gebruiken in uw React-applicatie.

Bijvoorbeeld:

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




Popover</Popover.Button>

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

In dit voorbeeld maakt u een popover met behulp van de Pop-over component uit de Headless UI-bibliotheek. Het bovenstaande codeblok genereert een popover die er als volgt uitziet.

Krijg volledige controle met ongestylede componenten

Ongestileerde componentbibliotheken geven u volledige controle over de stijl van uw React-applicatie, waardoor u unieke gebruikerservaringen kunt creëren. Deze bibliotheken bieden een scala aan opties om aan uw behoeften te voldoen. U kunt visueel aantrekkelijke en zeer aanpasbare React-applicaties maken door gebruik te maken van de hierboven genoemde bibliotheken.