Componentes React personalizados

Define componentes React personalizados directamente en archivos MDX. Exporta un componente de función flecha en la parte superior del archivo y úsalo en línea. Los componentes se renderizan en el servidor en tiempo de build, con acceso a todos los componentes integrados de Jamdesk y a las clases de Tailwind.

Uso básico

Define un componente usando export const en la parte superior de tu archivo MDX:

export const Highlight = ({ children, color }) => (
  <span style={{ backgroundColor: color, padding: '0.2em 0.4em', borderRadius: '4px' }}>
    {children}
  </span>
);

This text has a <Highlight color="#ffeb3b">yellow highlight</Highlight> in it.

Ejemplo: tarjeta hero

Aquí tienes un ejemplo más complejo con múltiples props y clases de Tailwind:

export const HeroCard = ({ title, description, href, icon }) => (
  <a
    href={href}
    className="group block p-6 rounded-lg border border-gray-200 hover:border-blue-500 transition-colors"
  >
    <div className="flex items-center gap-3 mb-2">
      <Icon icon={icon} />
      <h3 className="font-semibold text-lg">{title}</h3>
    </div>
    <p className="text-gray-600">{description}</p>
  </a>
);

<div className="grid grid-cols-2 gap-4">
  <HeroCard
    title="Getting started"
    description="Learn the basics"
    href="/quickstart"
    icon="rocket"
  />
  <HeroCard
    title="Components"
    description="Explore available components"
    href="/components/overview"
    icon="puzzle-piece"
  />
</div>

Uso de componentes integrados

Tus componentes personalizados tienen acceso a todos los componentes integrados de Jamdesk. No se necesitan imports:

export const FeatureCard = ({ title, children }) => (
  <Card title={title} icon="star">

    {children}
    <Tip>This tip is inside a custom component!</Tip>
</Card>
);

<FeatureCard title="My Feature">
  <Note>Notes work inside custom components too!</Note>
</FeatureCard>

Componentes integrados por categoría:

Limitaciones

• Solo funciones flecha: usa la sintaxis export const. La sintaxis export function no es compatible.
• Sin imports: no puedes importar paquetes externos ni otros archivos
• Sin hooks: los hooks de React (useState, useEffect, useRef, etc.) no están disponibles. Los componentes se renderizan en el servidor durante el build, y los hooks solo funcionan en el cliente. Para componentes interactivos, usa archivos snippet en su lugar (consulta la solución de problemas más abajo).
• Solo del lado del servidor: los componentes se renderizan en el servidor; no hay interactividad del lado del cliente ni controladores de eventos
• Solo Tailwind: usa clases de Tailwind CSS para los estilos; CSS-in-JS no está disponible
• Sintaxis estricta: los errores de sintaxis en componentes inline harán fallar el build con un mensaje de error claro
• Nombres en PascalCase: los nombres de los componentes deben empezar con una letra mayúscula y contener solo letras y números (sin guiones bajos)

Buenas prácticas

Solución de problemas

export const MyComponent = ({ prop }) => (
  <div>{prop}</div>
);

// Instead of: export const Note = ...
export const CustomNote = ({ children }) => (
  <div className="my-note">{children}</div>
);

export const Highlight = ({ children }) => (
  <span style={{ backgroundColor: '#ffeb3b' }}>{children}</span>
);

// Instead of:
export function MyComponent({ prop }) {
  return <div>{prop}</div>;
}

// Use:
export const MyComponent = ({ prop }) => (
  <div>{prop}</div>
);

// Instead of: export const Hero_Card = ...
// Instead of: export const my-component = ...
export const HeroCard = ({ title }) => (
  <div>{title}</div>
);

'use client';

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

import { Counter } from '/snippets/counter';

<Counter />

¿Qué sigue?