Saltar al contenido principal

Inicio rápido

Esta página asume que ya has completado la Instalación y que has importado theme.css y los estilos de los componentes que utilizas.

No hace falta install​

@lh-ui/react no tiene mecanismo de plugins: todo son exportaciones con nombre; basta con importar lo que necesites, bajo demanda.

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">Empezar a usar</LhButton>
}

Controlado y no controlado​

Los componentes controlados admiten a la vez value + onChange (controlado) y defaultValue (no controlado), con la misma semántica que los formularios nativos de React:

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

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

  return (
    <>
      {/* Controlado */}
      <LhInput value={value} onChange={(val) => setValue(val)} />

      {/* No controlado */}
      <LhInput defaultValue="Valor predeterminado" />
    </>
  )
}
Los callbacks de evento llevan dos parámetros

El onChange de todos los componentes de formulario lleva dos parámetros, (value, event): el primero es el nuevo valor y el segundo el evento nativo. Es isomorfo con el emit('change', [val, e]) de lh-ui-plus, lo que facilita la migración desde Vue.

Configuración global​

Usa LhConfigProvider para proporcionar globalmente el tamaño, el idioma y las variables de tema:

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

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

Aunque no envuelvas la aplicación con LhConfigProvider, los componentes no dan error: el lado consumidor dispone de valores de respaldo con todos los campos undefined.

Servicios imperativos​

Los servicios imperativos como message se montan en un contenedor singleton de creación perezosa: el root de React solo se crea en la primera llamada:

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

message.success('Guardado con éxito')
notification.success({ title: 'Guardado con éxito', content: 'La obra se ha publicado en la galería.' })
loading.show({ text: 'Enviando…' })

La función de cada uno de los tres servicios: message es una notificación breve en la parte superior, notification es una notificación con título / cuerpo en una de las cuatro esquinas, y loading es una máscara de carga a pantalla completa o local. Más detalles en la documentación de cada componente.

Relación con lh-ui-plus​

@lh-ui/react y @lh-ui/vue3 (lh-ui-plus) comparten origen y estructura:

  • La lógica de los componentes es exactamente la misma, procedente de @lh-ui/share/core; ninguna de las dos bibliotecas mantiene una copia de la lógica
  • Los estilos son exactamente los mismos, procedentes de @lh-ui/share/styles, con correspondencia uno a uno de los nombres de clase BEM
  • Las props tienen el mismo nombre y el mismo significado, con solo adaptaciones a las convenciones de React (v-model → value/onChange, etc.)

Si vienes de Vue, lee la Guía de migración.

Renderizado del lado servidor (SSR)​

Los componentes son seguros para SSR: todas las manipulaciones de DOM se ejecutan dentro de useEffect / useIsomorphicLayoutEffect, y useLhLocale usa useSyncExternalStore para ofrecer una instantánea SSR. Los servicios imperativos (message, etc.), al ser llamados en el servidor, solo emiten una advertencia y no-op.