Démarrage rapide

Cette page suppose que vous avez terminé l'Installation et importé theme.css ainsi que les styles des composants utilisés.

Pas de install

@lh-ui/react n'a pas de mécanisme de plugin : tout est constitué d'exports nommés, à importer directement à la demande.

import { LhButton } from '@lh-ui/react'
import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/button'

export default function App() {
  return <LhButton type="primary">Commencer</LhButton>
}

Contrôlé et non contrôlé

Les composants prennent en charge à la fois value + onChange (contrôlé) et defaultValue (non contrôlé), avec une sémantique identique à celle des formulaires natifs React :

import { useState } from 'react'
import { LhInput } from '@lh-ui/react'

function Demo() {
  const [value, setValue] = useState('')

  return (
    <>
      {/* Contrôlé */}
      <LhInput value={value} onChange={(val) => setValue(val)} />

      {/* Non contrôlé */}
      <LhInput defaultValue="Valeur par défaut" />
    </>
  )
}

Callbacks d'événement à deux paramètres

Le onChange de tous les composants de formulaire prend deux paramètres, (value, event) : le premier est la nouvelle valeur, le second l'événement natif. Cette signature est isomorphe au emit('change', [val, e]) de lh-ui-plus, ce qui facilite la migration depuis Vue.

Configuration globale

Utiliser LhConfigProvider pour fournir la taille globale, la langue et les variables de thème :

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

export default function App() {
  return (
    <LhConfigProvider size="middle" locale="zh-CN">
      <YourApp />
    </LhConfigProvider>
  )
}

En l'absence de LhConfigProvider, les composants ne produisent aucune erreur — la consommation dispose de valeurs de repli dont tous les champs sont undefined.

Services impératifs

Les services impératifs tels que message sont montés dans un conteneur singleton créé paresseusement : le root React n'est instancié qu'à la première invocation.

import { message, notification, loading } from '@lh-ui/react'
import '@lh-ui/react/style/message'

message.success('Enregistré avec succès')
notification.success({ title: 'Enregistré avec succès', content: "L'œuvre a été publiée dans la galerie." })
loading.show({ text: 'Envoi en cours…' })

Le rôle de chacun des trois services : message est une notification légère en haut de l'écran, notification une notification à quatre coins avec titre et corps, et loading un masque de chargement plein écran ou local. Voir la documentation de chacun de ces composants.

Relation avec lh-ui-plus

@lh-ui/react et @lh-ui/vue3 (lh-ui-plus) partagent la même origine et la même structure :

• La logique des composants est strictement identique, tirée de @lh-ui/share/core ; aucune des deux bibliothèques n'en détient de copie
• Les styles sont strictement identiques, tirés de @lh-ui/share/styles, avec une correspondance un à un des noms de classe BEM
• Les props portent les mêmes noms et les mêmes sens, avec simplement des adaptations aux usages de React (v-model → value/onChange, etc.)

Pour migrer depuis Vue, lisez le Guide de migration.

Rendu côté serveur (SSR)

Les composants sont sûrs en SSR : toutes les opérations DOM sont exécutées dans useEffect / useIsomorphicLayoutEffect, et useLhLocale s'appuie sur useSyncExternalStore pour fournir un instantané SSR. Les services impératifs (message, etc.) ne font qu'émettre un avertissement et un no-op lorsqu'ils sont appelés côté serveur.