Componenti React personalizzati

Definisci componenti React personalizzati direttamente nei file MDX. Esporta un componente arrow function nella parte iniziale del file e usalo inline. I componenti vengono renderizzati lato server durante la build, con accesso a tutti i componenti integrati di Jamdesk e alle classi Tailwind.

Utilizzo di base

Definisci un componente usando la sintassi export const nella parte iniziale del file 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.

Esempio: scheda hero

Ecco un esempio più complesso con più props e classi 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>

Utilizzo dei componenti integrati

I tuoi componenti personalizzati hanno accesso a tutti i componenti integrati di Jamdesk. Non sono necessari import:

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>

Componenti integrati per categoria:

Limitazioni

• Solo arrow function: usa la sintassi export const. La sintassi export function non è supportata.
• Nessun import: non puoi importare pacchetti esterni o altri file.
• Nessun hook: gli hook React (useState, useEffect, useRef, ecc.) non sono disponibili. I componenti vengono renderizzati lato server durante la build e gli hook funzionano solo lato client. Per i componenti interattivi, usa invece i file snippet (vedi la sezione sulla risoluzione dei problemi).
• Solo lato server: i componenti vengono renderizzati sul server; non sono disponibili interattività lato client o gestori di eventi.
• Solo Tailwind: usa le classi CSS Tailwind per gli stili; CSS-in-JS non è disponibile.
• Sintassi rigorosa: gli errori di sintassi nei componenti inline interrompono la build con un messaggio di errore chiaro.
• Nomi in PascalCase: i nomi dei componenti devono iniziare con una lettera maiuscola e contenere solo lettere e numeri (nessun carattere di sottolineatura).

Best practice

Risoluzione dei problemi

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

Qual è il prossimo passo?