Composants React personnalisés

Définissez des composants React personnalisés directement dans les fichiers MDX. Exportez un composant en arrow function en haut du fichier et utilisez-le en ligne. Les composants sont rendus côté serveur au moment du build avec accès à tous les composants intégrés de Jamdesk et aux classes Tailwind.

Les captures d'écran montrent l'interface en anglais.

Utilisation de base

Définissez un composant avec export const en haut de votre fichier 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.

Exemple : Carte Hero

Voici un exemple plus complexe avec plusieurs props et des 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>

Utiliser les composants intégrés

Vos composants personnalisés ont accès à tous les composants intégrés de Jamdesk. Aucun import nécessaire :

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>

Composants intégrés par catégorie :

Limitations

• Arrow functions uniquement : Utilisez la syntaxe export const. La syntaxe export function n'est pas supportée.
• Pas d'imports : Vous ne pouvez pas importer des packages externes ou d'autres fichiers
• Pas de hooks : Les hooks React (useState, useEffect, useRef, etc.) ne sont pas disponibles. Les composants sont rendus côté serveur lors du build, et les hooks ne fonctionnent que côté client. Pour les composants interactifs, utilisez plutôt des fichiers de snippets (voir la section dépannage ci-dessous).
• Côté serveur uniquement : Les composants sont rendus côté serveur ; pas d'interactivité côté client ni de gestionnaires d'événements
• Tailwind uniquement : Utilisez les classes CSS Tailwind pour le style ; CSS-in-JS n'est pas disponible
• Syntaxe stricte : Les erreurs de syntaxe dans les composants inline feront échouer le build avec un message d'erreur clair
• Noms en PascalCase : Les noms de composants doivent commencer par une lettre majuscule et ne contenir que des lettres et des chiffres (pas de tirets bas)

Bonnes pratiques

Dépannage

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>
  );
}

<Counter />

Et ensuite ?