Comment choisir une library de composants UI avec React et Next.js ?

Baptiste Drillien

Développeur front-end

Les librairies de composants UI ont révolutionné notre manière de développer des sites et applications web. En proposant un panel complet d’outils pour aider à l’intégration , elles permettent un gain de temps considérable.

Avec l’avènement de React et Next.js et la quantité de librairies qui augmente de façon exponentielle, on peut se demander comment choisir la bonne bibliothèque de composants pour son projet ?

Dans cet article, nous allons découvrir les différentes approches pour créer des composants en abordant leurs avantages et leurs inconvénients.

Il existe 4 approches différentes pour créer des composants dans son projet React :

• Les frameworks CSS (Bootstrap, Material UI, Bulma, etc.)
• Les librairies headless (Headless UI, Radix UI, Base UI, etc.)
• Créer ses propres composants
• Combiner les différentes approches (du headless et des composants "faits maison")

Les frameworks CSS traditionnels tels que Bootstrap, Material UI ou encore Bulma offrent une grande variété de composants prêts à l'emploi.

• Accessibilité : support des différents navigateurs, a11y
• Exhaustivité : large choix de composants
• Simplicité : facile à installer et utiliser
• Gain de temps : la logique et le style sont déjà présents
• Fonctionnalités annexes : différents thèmes, mode sombre, responsive, etc.

• Personnalisation : il faut surcharger le style existant pour le modifier
• Flexibilité : le comportement du composant est difficilement modifiable
• Performance : du style est chargé mais inutilisé
• Dépendance : il est compliqué de faire la transition avec un autre framework

• PoC (Proof of Concept)
• Projets personnels
• Projets avec des contraintes budgétaires

Prenons l’exemple d’un composant que l’on retrouve dans beaucoup de projet : les dropdowns. Ci-contre, un exemple avec React Bootstrap :

1import ReactBootstrapDropdown, {
2		Toggle,
3		Menu,
4		Item,
5} from "react-bootstrap/Dropdown"
6
7export const Dropdown = () => (
8		<ReactBootstrapDropdown>
9			<Toggle variant="success" id="dropdown-basic">
10				Dropdown Button
11			</Toggle>
12
13			<Menu>
14				<Item href="#/action-1">Action</Item>
15				<Item href="#/action-2">Another action</Item>
16				<Item href="#/action-3">Something else</Item>
17			</Menu>
18		</ReactBootstrapDropdown>
19)

En opposition aux frameworks CSS, il y a les bibliothèques dites “headless” : les composants viennent avec leur logique mais dénués de style.

• Accessibilité : support des différents navigateurs, a11y
• Exhaustivité : large choix de composants
• Simplicité : facile à installer et utiliser
• Gain de temps : la logique est déjà présente
• Personnalisation : liberté d’ajouter son propre style

• Flexibilité : le comportement du composant est parfois difficilement modifiable
• Temps de développement : il faut prendre du temps pour ajouter du style aux composants

• Dès lors qu’il y a un design system / des maquettes

Hexa web

Des conseils pour un projet web ?

Nous contacter

Encore une fois, gardons l’exemple des dropdowns. Voilà un exemple avec Headless UI (et donc du style avec TailwindCSS) :

1import { Menu } from "@headlessui/react"
2
3const MyDropdown = () => (
4		<Menu>
5			<Menu.Button>More</Menu.Button>
6			<Menu.Items>
7				<Menu.Item>
8					{({ active }) => (
9						<a
10							className={`${active && "bg-blue-500"}`}
11							href="/account-settings"
12						>
13							Account settings
14						</a>
15					)}
16				</Menu.Item>
17				<Menu.Item>
18					{({ active }) => (
19						<a
20							className={`${active && "bg-blue-500"}`}
21							href="/account-settings"
22						>
23							Documentation
24						</a>
25					)}
26				</Menu.Item>
27				<Menu.Item disabled>
28					<span className="opacity-75">
29						Invite a friend (coming soon!)
30					</span>
31				</Menu.Item>
32			</Menu.Items>
33		</Menu>
34)

La création d’un dropdown prendrait trop de temps. Selon Pedro Duarte, créateur de Radix UI, voilà le temps qu’il aura fallu à son équipe pour développer leur dropdown :

Évidemment, la durée du développement se justifie par le nombre de fonctionnalités qu'offrent les dropdowns de Radix UI.

Les composants "maison" sont pertinents mais seulement lorsqu’ils ne requièrent pas trop de logique.

• Personnalisation : liberté d’ajouter son propre style
• Flexibilité : pas de restriction sur le comportement du composant et sa capacité à évoluer
• Minimalisme : le composant répond uniquement aux besoins précis de l’interface

• Accessibilité : il est important de respecter les conventions et respecter les normes de a11y
• Temps de développement : il faut prendre du temps pour ajouter du style aux composants et développer la logique (s’il y en a)

• Composants minimalistes
• Composants très spécifiques

En combinant les bibliothèques headless avec des composants personnalisés, il est possible de tirer profit des deux parties.

En effet, la combinaison des deux couvre la majorité des avantages :

Avec cette approche, nous avons une cohérence maximale au niveau du style de nos composants, ils sont flexibles, personnalisés et le temps de développement est optimisé.

Hexa web

Des conseils pour un projet web ?

Nous contacter

Le choix d'une bibliothèque de composants avec React et Next.js dépend des besoins spécifiques du projet et des préférences personnelles du développeur.

Chaque approche à son lot d’avantages et d’inconvénients qu’il faut prendre en compte pour faire le bon choix.

Pour des projets persos, des PoC ou des projets avec des contraintes budgétaires, un framework CSS peut s’avérer pertinent. En revanche, pour le reste, la combinaison des composants headless et personnalisés présente le plus d’avantages.

Retrouvez cette liste de librairies headless pour vos projets React / Next.js.