Composants React personnalisés

Définissez des composants React personnalisés directement dans vos fichiers MDX. Exportez un composant sous forme de fonction fléchée en haut du fichier, puis 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.

Utilisation de base

Définissez un composant à l'aide d'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 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>

Utilisation des composants intégrés

Vos composants personnalisés ont accès à tous les composants intégrés de Jamdesk. Aucun import n'est 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

• Fonctions fléchées uniquement : utilisez la syntaxe export const. La syntaxe export function n'est pas prise en charge.
• Aucun import : vous ne pouvez pas importer de packages externes ou d'autres fichiers
• Aucun hook : les hooks React (useState, useEffect, useRef, etc.) ne sont pas disponibles. Les composants sont rendus côté serveur pendant le build, et les hooks ne fonctionnent que côté client. Pour des composants interactifs, utilisez plutôt des fichiers snippet (voir le dépannage ci-dessous).
• Côté serveur uniquement : les composants sont rendus sur le serveur ; aucune interactivité côté client ni gestionnaire d'événements
• Tailwind uniquement : utilisez des classes Tailwind CSS pour le style ; le 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 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>
  );
}

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

<Counter />

Étapes suivantes