4 bästa ostilade komponentbibliotek för att bygga anpassningsbara React-appar

Du kan använda komponentbibliotek som tillhandahåller förbyggda, utformade element för att förenkla utvecklingsprocessen för React-appar. Dessa bibliotek kan spara mycket tid och ansträngning, men de kan också begränsa din kontroll över utformningen av din app. Om du behöver mer kontroll över dina React-appars stil, överväg att använda ett opylerat komponentbibliotek.

Vad är bibliotek med ostilade komponenter?

Ostylad komponent bibliotek används för att utveckla tillgängliga React-applikationer. De är samlingar av återanvändbara UI-komponenter utan fördefinierade stilar. De ger dig den grundläggande strukturen för UI-element utan någon formgivning. Detta ger dig fullständig kontroll över hur dina komponenter ser ut och känns.

Fördelar med bibliotek med ostylade komponenter

Här är några av fördelarna med att använda opylerade komponentbibliotek:

• Fullständig kontroll över stylingen: Ostilade komponentbibliotek ger dig full kontroll över hur dina komponenter ser ut. Du kan använda valfri CSS eller stylingramverk för att anpassa komponenterna för att matcha dina behov.
  instagram viewer
• Påskynda utvecklingen: Ostilade komponentbibliotek kan hjälpa dig att påskynda utvecklingen genom att tillhandahålla en uppsättning förbyggda komponenter som du kan använda i din app.
• Lätt att underhålla: Ostylade komponentbibliotek är lätta att underhålla eftersom de inte är tätt kopplade till något specifikt stylingramverk. Det innebär att du enkelt kan uppdatera stylingen utan att göra ändringar i den underliggande koden.

Radix UI är ett oformaterat komponentbibliotek som fokuserar på tillgänglighet. Den tillhandahåller en uppsättning UI-komponenter utformade för att vara tillgängliga för alla användare. Du kan bygg vackra React-appar med Radix UI.

När du arbetar med Radix UI kan du installera de enskilda komponenter du behöver istället för hela biblioteket. Detta säkerställer att du håller din applikation lätt.

Om du till exempel bara behöver en dragspelskomponent kan du installera den i din applikation genom att köra följande kommando:

npm install @radix-ui/react-accordion

Efter att ha installerat dragspelskomponenten kan du skapa dragspel i din React-app.

Här är ett exempel på hur man använder dragspelskomponenten:

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

Kodblocket ovan ställer in en grundläggande opylerad dragspelskomponent med hjälp av @radix-ui/react-accordion bibliotek, vilket möjliggör hopfällbara objekt med anpassningsbart innehåll.

Koden kommer att generera ett dragspel som ser ut så här:

React Aria-biblioteket är en uppsättning krokar för att bygga användargränssnitt i React. Biblioteket gör det enklare att skapa tillgängliga webbapplikationer genom att tillhandahålla en samling komponenter som följer bästa praxis för tillgänglighet.

Adobe utvecklade och underhåller React Aria-biblioteket. Biblioteket är en del av det mer omfattande Adobe Spectrum Design System, som tillhandahåller en omfattande uppsättning designriktlinjer och resurser för att bygga tillgängliga användargränssnitt. Elementen som tillhandahålls av React Aria-biblioteket är ostilade, vilket gör att du kan anpassa elementen för att passa dina behov.

För att använda React Aria i din React-applikation, installera den genom att köra följande kommando:

npm install react-aria

Här är ett exempel på hur man skapar en knappkomponent med hjälp av använd knappen 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;

Nu kan du importera och rendera knapp komponent i någon annan komponent du väljer.

Till exempel:

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

När du renderar kodblocket ovan genererar det en enkel knapp som ser ut så här:

Om du är obekväm med att använda React Aria på grund av krokarna, använd Reager Aria-komponenter bibliotek istället. Det här biblioteket tillhandahåller förbyggda komponenter som är tillgängliga som standard. Det är ett tunt lager ovanpå React Aria-biblioteket. Komponenterna som tillhandahålls är ostilade, så de två biblioteken är väldigt lika.

Base UI är ett oformaterat React UI-bibliotek som tillhandahåller UI-komponenter utan styling. Material UI-teamet skapade Base UI med en uppsättning grundläggande komponenter som du kan använda för att bygga dina egna anpassade React-appar. De baserade Base UI-biblioteket på detsamma robust teknik som material UI, men Base UI implementerar inte Material Design.

Du kan installera Base UI i din React-applikation med det här kommandot:

npm install @mui/base

Base UI tillhandahåller komponenter när du är på språng, vilket innebär att du direkt kan importera och använda komponenter från biblioteket. Den tillhandahåller även krokar som du kan använda för att skapa och konfigurera dina komponenter.

Här är ett exempel på hur du använder Base UI-komponenter:

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


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

Denna kod genererar en enkel knapp med hjälp av Knapp komponent i Base UI-biblioteket. Du kan också använda använd knappen krok för att utföra samma uppgift.

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


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

De använd knappen krok och Knapp komponent kommer att generera en oformaterad knapp, som visas i bilden nedan.

Ett annat bibliotek du kan utforska är Headless UI, som erbjuder ostilade UI-element, vilket ger dig friheten att anpassa utseendet och beteendet hos dina UI-komponenter som du vill.

Du kan installera biblioteket med följande kommando:

npm install @headlessui/react

Efter att du har installerat biblioteket kan du använda flera komponenter som biblioteket tillhandahåller i din React-applikation.

Till exempel:

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




Popover</Popover.Button>

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

I det här exemplet skapar du en popover med hjälp av Popover komponent från Headless UI-biblioteket. Kodblocket ovan kommer att generera en popover som ser ut så här.

Få fullständig kontroll med ostilade komponenter

Ostylade komponentbibliotek ger dig fullständig kontroll över utformningen av din React-applikation, så att du kan skapa unika användarupplevelser. Dessa bibliotek erbjuder en rad alternativ för att passa dina behov. Du kan skapa visuellt tilltalande och mycket anpassningsbara React-applikationer genom att utnyttja biblioteken som nämns ovan.