コンポーネントの利用

MDX では、Markdown の中に rEFui JSX コンポーネントを直接埋め込むことができます。再利用可能なコンポーネントを components/ ディレクトリに配置することで、すべてのページから即座に利用可能になります。

コンポーネントの作成

// components/Callout.jsx
export default function Callout(props, ...children) {
	return <div class="callout">{...children}</div>
}

MDX 内での使用

<Callout>
  ヒント: 各セクションを簡潔にまとめると、読者の可読性が向上します。
</Callout>

クライアント専用コンポーネント

ブラウザ API に依存するコンポーネント（Window オブジェクトの使用など）を作成する場合は、ファイル名に .client サフィックスを付与してください。

components/Map.client.jsx

インタラクティブなコンポーネントの例

以下は、シンプルなカウンターコンポーネントの例です。

// components/Counter.client.jsx
import './Counter.css'
import { signal } from 'refui'

export default function Counter({ initial = 0 }) {
	const count = signal(initial)
	return (
		<div class="counter">
			<button on:click={() => count.value--}>-</button>
			<span>{count}</span>
			<button on:click={() => count.value++}>+</button>
		</div>
	)
}

このコンポーネントは CSS のインポートを含んでおり、サーバーサイドでの静的レンダリング（SSG）時に直接処理できないため、静的レンダリング用のフォールバックバージョンを用意する必要があります。

// components/Counter.static.jsx
export default function Counter({ initial = 0 }) {
	return (
		<div>
			[ このコンポーネントを表示するには JavaScript を有効にしてください ]
		</div>
	)
}

ページ内での記述方法:

<Counter />

実際のプレビュー:

[ You need to enable JavaScript to load this component. ]

より詳細なカスタマイズ方法については、カスタムコンポーネントを参照してください。