Aller au contenu principal

Installation

Prérequis​

  • React ^18.0.0 ou ^19.0.0
  • TypeScript >= 5.0 (facultatif, mais recommandé)

La seule dépendance à l'exécution de @lh-ui/react est @lh-ui/share — la couche partagée de la famille, indépendante du framework (logique des composants, styles, thèmes, textes). Les peer dependencies sont react et react-dom.

Installation via un gestionnaire de paquets​

pnpm add @lh-ui/react
npm install @lh-ui/react
yarn add @lh-ui/react
bun add @lh-ui/react

Importer les styles​

@lh-ui/react adopte une stratégie d'import à la demande (alignée sur @lh-ui/vue2) : l'entrée du paquet n'injecte aucun style ; les variables de thème et les styles de composants sont importés séparément.

// Variables de thème (requis) : contient les jetons de conception et les variables sombres
import '@lh-ui/react/theme.css'

// Styles de composants (à la demande) : un import par composant utilisé
import '@lh-ui/react/style/button'
import '@lh-ui/react/style/input'

Les noms de classe du CSS de thème et du CSS de composants sont strictement identiques, vous pouvez donc également importer la même source SCSS depuis @lh-ui/share et la compiler vous-même :

@use '@lh-ui/share/styles/theme/common/var.scss';
@use '@lh-ui/share/styles/button';
Pourquoi pas une injection complète

L'import à la demande est la pratique dominante de l'écosystème React, et un effet de bord avec l'intégralité des styles rompt le tree-shaking. En laissant à l'utilisateur le soin d'importer les styles, le bundler peut élaguer avec précision les styles des composants inutilisés.

Mode sombre​

Les variables sombres se trouvent dans theme-dark.css, mutuellement exclusif avec theme.css (un des deux au choix), ou basculées à l'exécution via useLhTheme / useLhPresetTheme :

import { useLhTheme } from '@lh-ui/react'

function App() {
  const { theme, toggleTheme } = useLhTheme()
  return <button onClick={toggleTheme}>{theme === 'dark' ? 'Passer au mode clair' : 'Passer au mode sombre'}</button>
}

Support des navigateurs​

Navigateurs modernes (Chrome / Edge / Firefox / Safari, les deux dernières versions stabilisées). Les composants utilisent massivement des propriétés personnalisées CSS (var(--lh-*)), non prises en charge par IE.