Saltar al contenido principal

Instalación

Requisitos del entorno​

  • React ^18.0.0 o ^19.0.0
  • TypeScript >= 5.0 (opcional, pero recomendado)

La única dependencia en tiempo de ejecución de @lh-ui/react es @lh-ui/share — la capa compartida independiente del framework de la familia (lógica de componentes, estilos, temas, textos). Las peer dependencies son únicamente react y react-dom.

Instalación con un gestor de paquetes​

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

Importar los estilos​

@lh-ui/react sigue una estrategia de importación bajo demanda (alineada con @lh-ui/vue2): la entrada del paquete no inyecta ningún estilo; las variables de tema y los estilos de componente se importan por separado.

// Variables de tema (necesarias): contienen los tokens de diseño y las variables del modo oscuro
import '@lh-ui/react/theme.css'

// Estilos de componente (bajo demanda): importa uno por cada componente que utilices
import '@lh-ui/react/style/button'
import '@lh-ui/react/style/input'

Los nombres de clase del CSS de tema y del CSS de componentes son exactamente los mismos, de modo que también puedes importar directamente la misma fuente SCSS de @lh-ui/share y compilarla tú mismo:

@use '@lh-ui/share/styles/theme/common/var.scss';
@use '@lh-ui/share/styles/button';
Por qué no se inyecta la hoja completa

En el ecosistema React, la importación bajo demanda es la práctica habitual, y un side-effect con todos los estilos rompería el tree-shaking. Al dejar la entrada de estilos en manos del usuario, el bundler puede recortar con precisión los estilos de los componentes que no se utilicen.

Modo oscuro​

Las variables del modo oscuro están en theme-dark.css, que es mutuamente excluyente con theme.css (uno de los dos), o bien se conmutan en tiempo de ejecución con useLhTheme / useLhPresetTheme:

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

function App() {
  const { theme, toggleTheme } = useLhTheme()
  return <button onClick={toggleTheme}>{theme === 'dark' ? 'Cambiar a modo claro' : 'Cambiar a modo oscuro'}</button>
}

Soporte de navegadores​

Navegadores modernos (Chrome / Edge / Firefox / Safari, las dos últimas versiones estables). Los componentes hacen un uso intensivo de las custom properties de CSS (var(--lh-*)); no se soporta IE.