React

Crea elementos interactivos en tus documentos usando componentes de React y hooks directamente en archivos MDX.

Componentes en línea

Declara componentes directamente en tu archivo MDX:

export const Counter = () => {
  const [count, setCount] = useState(0)
  const increment = () => setCount(count + 1)
  const decrement = () => setCount(count - 1)

  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  )
}

<Counter />

Importar componentes

Los archivos de componentes deben estar en la carpeta /snippets/. Más información sobre fragmentos reutilizables.

Los imports anidados no son compatibles. Importa todos los componentes referenciados directamente en el archivo MDX padre.

Crea un archivo de componente en snippets/:

/snippets/color-generator.jsx

export const ColorGenerator = () => {
  const [hue, setHue] = useState(180)
  const [saturation, setSaturation] = useState(50)
  const [lightness, setLightness] = useState(50)
  const [colors, setColors] = useState([])

  useEffect(() => {
    const newColors = []
    for (let i = 0; i < 5; i++) {
      const l = Math.max(10, Math.min(90, lightness - 20 + i * 10))
      newColors.push(`hsl(${hue}, ${saturation}%, ${l}%)`)
    }
    setColors(newColors)
  }, [hue, saturation, lightness])

  const copyToClipboard = (color) => {
    navigator.clipboard
      .writeText(color)
      .then(() => {
        console.log(`Copied ${color} to clipboard!`)
      })
      .catch((err) => {
        console.error("Failed to copy: ", err)
      })
  }

  return (
    <div className="p-4 border dark:border-zinc-950/80 rounded-xl not-prose">
      <div className="space-y-4">
        <div className="space-y-2">
          <label className="block text-sm text-zinc-950/70 dark:text-white/70">
            Hue: {hue}°
            <input
              type="range"
              min="0"
              max="360"
              value={hue}
              onChange={(e) => setHue(Number.parseInt(e.target.value))}
              className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
              style={{
                background: `linear-gradient(to right, 
                  hsl(0, ${saturation}%, ${lightness}%), 
                  hsl(60, ${saturation}%, ${lightness}%), 
                  hsl(120, ${saturation}%, ${lightness}%), 
                  hsl(180, ${saturation}%, ${lightness}%), 
                  hsl(240, ${saturation}%, ${lightness}%), 
                  hsl(300, ${saturation}%, ${lightness}%), 
                  hsl(360, ${saturation}%, ${lightness}%))`,
              }}
            />
          </label>

          <label className="block text-sm text-zinc-950/70 dark:text-white/70">
            Saturation: {saturation}%
            <input
              type="range"
              min="0"
              max="100"
              value={saturation}
              onChange={(e) => setSaturation(Number.parseInt(e.target.value))}
              className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
              style={{
                background: `linear-gradient(to right, 
                  hsl(${hue}, 0%, ${lightness}%), 
                  hsl(${hue}, 50%, ${lightness}%), 
                  hsl(${hue}, 100%, ${lightness}%))`,
              }}
            />
          </label>

          <label className="block text-sm text-zinc-950/70 dark:text-white/70">
            Lightness: {lightness}%
            <input
              type="range"
              min="0"
              max="100"
              value={lightness}
              onChange={(e) => setLightness(Number.parseInt(e.target.value))}
              className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
              style={{
                background: `linear-gradient(to right, 
                  hsl(${hue}, ${saturation}%, 0%), 
                  hsl(${hue}, ${saturation}%, 50%), 
                  hsl(${hue}, ${saturation}%, 100%))`,
              }}
            />
          </label>
        </div>

        <div className="flex space-x-1">
          {colors.map((color, idx) => (
            <div
              key={idx}
              className="h-16 rounded flex-1 cursor-pointer transition-transform hover:scale-105"
              style={{ backgroundColor: color }}
              title={`Click to copy: ${color}`}
              onClick={() => copyToClipboard(color)}
            />
          ))}
        </div>

        <div className="text-sm font-mono text-zinc-950/70 dark:text-white/70">
          <p>
            Base color: hsl({hue}, {saturation}%, {lightness}%)
          </p>
        </div>
      </div>
    </div>
  )
}

Luego impórtalo y úsalo:

import { ColorGenerator } from "/snippets/color-generator.jsx"

<ColorGenerator />

Consideraciones

Solo renderizado en el cliente: Los componentes personalizados se renderizan en el navegador después de que se carga la página, por lo que no están en el HTML renderizado en el servidor. Esto se aplica a los componentes que defines con export en un archivo MDX y a los componentes que importas por nombre desde un snippet, como import { ColorGenerator } from "/snippets/color-generator.jsx". Los snippets MDX que importas como contenido, como import MySnippet from "/snippets/my-snippet.mdx", se renderizan en el servidor.
SEO: Como los componentes personalizados no están en el HTML inicial, es posible que los motores de búsqueda no indexen completamente su contenido.
Carga inicial: Los visitantes pueden ver un parpadeo o un desplazamiento del diseño mientras se renderizan los componentes personalizados. Para el contenido que debe aparecer en el HTML inicial o que no debe desplazarse al cargar, usa componentes integrados como tarjetas y columnas. La mayoría de los componentes integrados se renderizan en el servidor.
Accesibilidad: Asegúrate de que los lectores de pantalla anuncien los cambios de contenido dinámico.
Optimiza los arrays de dependencias: Incluye solo las dependencias necesarias en useEffect.
Memoriza operaciones costosas: Usa useMemo o useCallback cuando proceda.
Reduce los renderizados: Divide los componentes grandes en otros más pequeños.
Carga diferida: El código de los componentes no se puede cargar de forma diferida. Todos los componentes se cargan junto con la página. Si un componente realiza operaciones que consumen muchos recursos al montarse, como obtener datos o cálculos pesados, usa el renderizado condicional para posponer su montaje hasta que el usuario interactúe.

Primeros pasos

Crear contenido

Administra tu sitio

Agente

Assistant

Contenido preparado para agentes

Búsqueda y SEO

Documentar APIs

Integraciones

Referencia

Componentes en línea

Importar componentes

Consideraciones

​Componentes en línea

​Importar componentes

​Consideraciones

Componentes en línea

Importar componentes

Consideraciones