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 />

Restricciones

Los componentes de React en Mintlify se ejecutan en un entorno MDX aislado con las siguientes restricciones:

Los hooks de React están preinyectados: useState, useEffect, useRef, useCallback, useMemo, useContext y useReducer están disponibles sin necesidad de importarlos.
Los paquetes de npm requieren configuración: Para importar paquetes de terceros, configura las bibliotecas de terceros. De lo contrario, usa las funciones integradas del navegador o escribe la lógica en línea.
Sin exportaciones por defecto: Usa exportaciones con nombre (export const MyComponent = ...). Las exportaciones por defecto (export default) no son compatibles.
Sin importaciones entre snippets: Los archivos de snippets no pueden importar otros archivos de snippets. Importa todas las dependencias directamente en el archivo MDX principal.
Sin importaciones de JSON: No se admite importar archivos .json.
Sin división de código: React.lazy y import() dinámico no son compatibles. Todo el código de componentes de una página, incluidos los snippets importados, se compila en la página y se carga con ella.

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

Renderizado en el cliente: La mayoría de 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 importas por nombre desde un snippet, como import { ColorGenerator } from "/snippets/color-generator.jsx", y a la mayoría de los componentes que defines con export en un archivo MDX. Los snippets MDX que importas como contenido, como import MySnippet from "/snippets/my-snippet.mdx", se renderizan en el servidor. Un componente que defines con export también se renderiza en el servidor cuando es una plantilla simple. Solo debe colocar sus props en elementos HTML y componentes integrados, sin estado, hooks, llamadas a funciones, condicionales, controladores de eventos ni atributos style. Cada lugar donde lo uses debe pasar solo atributos de texto simples, como <HeroCard title="Quickstart" href="/quickstart" />.
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

Restricciones

Importar componentes

Consideraciones

​Componentes en línea

​Restricciones

​Importar componentes

​Consideraciones

Componentes en línea

Restricciones

Importar componentes

Consideraciones