4 migliori librerie di componenti senza stile per la creazione di app React personalizzabili

Puoi utilizzare librerie di componenti che forniscono elementi predefiniti con stile per semplificare il processo di sviluppo per le app React. Queste librerie possono farti risparmiare molto tempo e fatica, ma possono anche limitare il tuo controllo sullo stile della tua app. Se hai bisogno di maggiore controllo sullo stile delle tue app React, considera l'utilizzo di una libreria di componenti senza stile.

Cosa sono le librerie di componenti senza stile?

Componente senza stile le librerie vengono utilizzate per sviluppare applicazioni React accessibili. Sono raccolte di componenti dell'interfaccia utente riutilizzabili senza stili predefiniti. Forniscono la struttura di base degli elementi dell'interfaccia utente senza alcuno stile. Questo ti dà il controllo completo sull'aspetto e sulla sensazione dei tuoi componenti.

Vantaggi delle librerie di componenti senza stile

Ecco alcuni dei vantaggi derivanti dall'utilizzo delle librerie di componenti senza stile:

• Controllo completo sullo styling: le librerie di componenti senza stile ti danno il pieno controllo sull'aspetto dei tuoi componenti. Puoi utilizzare qualsiasi CSS o framework di stile per personalizzare i componenti in base alle tue esigenze.
• Accelerare lo sviluppo: le librerie di componenti senza stile possono aiutarti ad accelerare lo sviluppo fornendo una serie di componenti predefiniti che puoi utilizzare nella tua app.
• Facile da mantenere: Le librerie di componenti senza stile sono facili da mantenere perché non sono strettamente collegate a nessun framework di stile specifico. Ciò significa che puoi aggiornare facilmente lo stile senza apportare modifiche al codice sottostante.

Radix UI è una libreria di componenti senza stile che si concentra sull'accessibilità. Fornisce una serie di componenti dell'interfaccia utente progettati per essere accessibili a tutti gli utenti. Puoi crea bellissime app React utilizzando l'interfaccia utente Radix.

Quando lavori con Radix UI, puoi installare i singoli componenti necessari invece dell'intera libreria. Ciò garantisce di mantenere la tua applicazione leggera.

Ad esempio, se hai bisogno solo di un componente Accordion, puoi installarlo nella tua applicazione eseguendo il comando seguente:

npm install @radix-ui/react-accordion

Dopo aver installato il componente Accordion, puoi creare accordion nella tua app React.

Ecco un esempio di come utilizzare il componente Accordion:

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

Il blocco di codice sopra imposta un componente di fisarmonica di base senza stile utilizzando il file @radix-ui/react-accordion libreria, consentendo elementi pieghevoli con contenuto personalizzabile.

Il codice genererà una fisarmonica simile a questa:

La libreria React Aria è un insieme di hook per la creazione di interfacce utente in React. La libreria semplifica la creazione di applicazioni Web accessibili fornendo una raccolta di componenti che seguono le migliori pratiche per l'accessibilità.

Adobe ha sviluppato e mantiene la libreria React Aria. La libreria fa parte del più ampio Adobe Spectrum Design System, che fornisce un set completo di linee guida e risorse di progettazione per la creazione di interfacce utente accessibili. Gli elementi forniti dalla libreria React Aria non hanno stile, consentendoti di personalizzare gli elementi in base alle tue esigenze.

Per utilizzare React Aria nella tua applicazione React, installalo eseguendo il seguente comando:

npm install react-aria

Ecco un esempio di come creare un componente pulsante utilizzando il file useButton gancio:

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;

Ora puoi importare ed eseguire il rendering del file pulsante componente in qualsiasi altro componente scelto.

Per esempio:

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

Quando esegui il rendering del blocco di codice sopra, genererà un semplice pulsante simile a questo:

Se ti senti a disagio nell'usare React Aria a causa dei ganci, usa il file Componenti di React Aria biblioteca invece. Questa libreria fornisce componenti predefiniti accessibili per impostazione predefinita. È uno strato sottile sopra la libreria React Aria. I componenti forniti non hanno stile, quindi le due librerie sono molto simili.

L'interfaccia utente di base è una libreria dell'interfaccia utente React senza stile che fornisce componenti dell'interfaccia utente senza stili. Il team dell'interfaccia utente di Material ha creato l'interfaccia utente di base con una serie di componenti fondamentali che puoi utilizzare per creare le tue app React personalizzate. Hanno basato la libreria Base UI sullo stesso ingegneria robusta come interfaccia utente dei materiali, ma l'interfaccia utente di base non implementa Material Design.

Puoi installare Base UI nella tua applicazione React con questo comando:

npm install @mui/base

L'interfaccia utente di base fornisce componenti ovunque ti trovi, il che significa che puoi importare e utilizzare direttamente i componenti dalla libreria. Fornisce inoltre hook che è possibile utilizzare per creare e configurare i componenti.

Ecco un esempio di utilizzo dei componenti dell'interfaccia utente di base:

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


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

Questo codice genera un semplice pulsante utilizzando il file Pulsante componente della libreria Base UI. Puoi anche usare il useButton gancio per eseguire lo stesso compito.

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


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

IL useButton gancio e il Pulsante Il componente genererà un pulsante senza stile, come mostrato nell'immagine seguente.

Un'altra libreria che puoi esplorare è Headless UI, che offre elementi dell'interfaccia utente senza stile, dandoti la libertà di personalizzare l'aspetto e il comportamento dei componenti dell'interfaccia utente come ritieni opportuno.

È possibile installare la libreria utilizzando il seguente comando:

npm install @headlessui/react

Dopo aver installato la libreria, puoi utilizzare i diversi componenti forniti dalla libreria nella tua applicazione React.

Per esempio:

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




Popover</Popover.Button>

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

In questo esempio, crei un popover utilizzando il file Popover componente dalla libreria Headless UI. Il blocco di codice sopra genererà un popover simile a questo.

Ottieni il controllo completo con componenti senza stile

Le librerie di componenti senza stile ti danno il controllo completo sullo stile della tua applicazione React, permettendoti di creare esperienze utente uniche. Queste librerie offrono una gamma di opzioni per soddisfare le tue esigenze. Puoi creare applicazioni React visivamente accattivanti e altamente personalizzabili sfruttando le librerie sopra menzionate.