Componentes React customizados

Defina componentes React personalizados diretamente em arquivos MDX. Exporte um componente de função de seta no início do arquivo e use-o em linha. Os componentes são renderizados no servidor durante o build, com acesso a todos os componentes integrados do Jamdesk e às classes Tailwind.

Uso básico

Defina um componente usando export const no início do arquivo 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.

Exemplo: cartão hero

Este é um exemplo mais complexo, com várias props e classes 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>

Como usar componentes integrados

Seus componentes personalizados têm acesso a todos os componentes integrados do Jamdesk. Não é necessário importar nada:

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 categoria:

Limitações

• Somente funções de seta: use a sintaxe export const. A sintaxe export function não é compatível.
• Sem imports: não é possível importar pacotes externos ou outros arquivos.
• Sem hooks: os hooks do React (useState, useEffect, useRef, etc.) não estão disponíveis. Os componentes são renderizados no servidor durante o build, e os hooks só funcionam no cliente. Para componentes interativos, use arquivos de snippet (consulte a seção de solução de problemas abaixo).
• Somente no servidor: os componentes são renderizados no servidor; não há interatividade no cliente nem manipuladores de eventos.
• Somente Tailwind: use classes CSS do Tailwind para estilização; CSS-in-JS não está disponível.
• Sintaxe estrita: erros de sintaxe em componentes em linha farão o build falhar com uma mensagem de erro clara.
• Nomes em PascalCase: os nomes dos componentes devem começar com uma letra maiúscula e conter somente letras e números (sem sublinhados).

Práticas recomendadas

Solução 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 />

O que vem a seguir?