4 meilleures bibliothèques de composants sans style pour créer des applications React personnalisables

Vous pouvez utiliser des bibliothèques de composants qui fournissent des éléments stylisés prédéfinis pour simplifier le processus de développement des applications React. Ces bibliothèques peuvent vous faire gagner beaucoup de temps et d'efforts, mais elles peuvent également limiter votre contrôle sur le style de votre application. Si vous avez besoin de plus de contrôle sur le style de vos applications React, envisagez d'utiliser une bibliothèque de composants sans style.

Que sont les bibliothèques de composants sans style?

Composant sans style les bibliothèques sont utilisées pour développer des applications React accessibles. Ce sont des collections de composants d'interface utilisateur réutilisables sans styles prédéfinis. Ils vous fournissent la structure de base des éléments de l’interface utilisateur sans aucun style. Cela vous donne un contrôle total sur l’apparence et la sensation de vos composants.

Avantages des bibliothèques de composants sans style

Voici quelques-uns des avantages de l’utilisation de bibliothèques de composants sans style :

• Contrôle total sur le style: Les bibliothèques de composants sans style vous donnent un contrôle total sur l'apparence de vos composants. Vous pouvez utiliser n'importe quel CSS ou framework de style pour personnaliser les composants en fonction de vos besoins.
• Accélérer le développement: les bibliothèques de composants sans style peuvent vous aider à accélérer le développement en fournissant un ensemble de composants prédéfinis que vous pouvez utiliser dans votre application.
• Facile à maintenir: Les bibliothèques de composants sans style sont faciles à maintenir car elles ne sont pas étroitement liées à un cadre de style spécifique. Cela signifie que vous pouvez facilement mettre à jour le style sans apporter de modifications au code sous-jacent.

Radix UI est une bibliothèque de composants sans style qui se concentre sur l'accessibilité. Il fournit un ensemble de composants d'interface utilisateur conçus pour être accessibles à tous les utilisateurs. Tu peux créer de belles applications React à l'aide de Radix UI.

Lorsque vous travaillez avec Radix UI, vous pouvez installer les composants individuels dont vous avez besoin au lieu de la bibliothèque entière. Cela garantit que vous gardez votre application légère.

Par exemple, si vous n'avez besoin que d'un composant accordéon, vous pouvez l'installer dans votre application en exécutant la commande suivante :

npm install @radix-ui/react-accordion

Après avoir installé le composant accordéon, vous pouvez créer des accordéons dans votre application React.

Voici un exemple d'utilisation du composant accordéon :

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

Le bloc de code ci-dessus configure un composant accordéon de base sans style en utilisant le @radix-ui/react-accordéon bibliothèque, permettant des éléments pliables avec un contenu personnalisable.

Le code générera un accordéon qui ressemble à ceci :

La bibliothèque React Aria est un ensemble de hooks permettant de créer des interfaces utilisateur dans React. La bibliothèque facilite la création d'applications Web accessibles en fournissant une collection de composants qui suivent les meilleures pratiques en matière d'accessibilité.

Adobe a développé et gère la bibliothèque React Aria. La bibliothèque fait partie du système de conception Adobe Spectrum plus complet, qui fournit un ensemble complet de directives de conception et de ressources pour créer des interfaces utilisateur accessibles. Les éléments fournis par la bibliothèque React Aria ne sont pas stylés, vous permettant de personnaliser les éléments en fonction de vos besoins.

Pour utiliser React Aria dans votre application React, installez-la en exécutant la commande suivante :

npm install react-aria

Voici un exemple de création d'un composant bouton à l'aide de l'outil utiliser le bouton crochet:

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;

Vous pouvez maintenant importer et restituer le bouton composant dans tout autre composant de votre choix.

Par exemple:

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

Lorsque vous rendrez le bloc de code ci-dessus, il générera un simple bouton qui ressemble à ceci :

Si vous n'êtes pas à l'aise avec React Aria à cause des hooks, utilisez le Composants de réaction Aria bibliothèque à la place. Cette bibliothèque fournit des composants prédéfinis accessibles par défaut. C'est une fine couche au-dessus de la bibliothèque React Aria. Les composants fournis ne sont pas stylisés, les deux bibliothèques sont donc très similaires.

Base UI est une bibliothèque d'interface utilisateur React sans style qui fournit des composants d'interface utilisateur sans style. L'équipe Material UI a créé Base UI avec un ensemble de composants fondamentaux que vous pouvez utiliser pour créer vos propres applications React personnalisées. Ils ont basé la bibliothèque Base UI sur le même ingénierie robuste en tant qu'interface utilisateur matérielle, mais Base UI n'implémente pas Material Design.

Vous pouvez installer Base UI dans votre application React avec cette commande :

npm install @mui/base

L'interface utilisateur de base fournit des composants en déplacement, ce qui signifie que vous pouvez directement importer et utiliser des composants de la bibliothèque. Il fournit également des hooks que vous pouvez utiliser pour créer et configurer vos composants.

Voici un exemple d'utilisation des composants de base de l'interface utilisateur :

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


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

Ce code génère un simple bouton en utilisant le Bouton composant de la bibliothèque Base UI. Vous pouvez également utiliser le utiliser le bouton crochet pour effectuer la même tâche.

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


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

Le utiliser le bouton crochet et le Bouton Le composant générera un bouton sans style, comme indiqué dans l’image ci-dessous.

Une autre bibliothèque que vous pouvez explorer est Headless UI, qui propose des éléments d'interface utilisateur sans style, vous donnant la liberté de personnaliser l'apparence et le comportement de vos composants d'interface utilisateur comme bon vous semble.

Vous pouvez installer la bibliothèque à l'aide de la commande suivante :

npm install @headlessui/react

Après avoir installé la bibliothèque, vous pouvez utiliser les différents composants fournis par la bibliothèque dans votre application React.

Par exemple:

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




Popover</Popover.Button>

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

Dans cet exemple, vous créez un popover à l'aide du Popover composant de la bibliothèque Headless UI. Le bloc de code ci-dessus générera un popover qui ressemble à ceci.

Obtenez un contrôle total avec des composants sans style

Les bibliothèques de composants sans style vous donnent un contrôle total sur le style de votre application React, vous permettant de créer des expériences utilisateur uniques. Ces bibliothèques offrent une gamme d'options pour répondre à vos besoins. Vous pouvez créer des applications React visuellement attrayantes et hautement personnalisables en tirant parti des bibliothèques mentionnées ci-dessus.