react-zmage インテグレーション

このスキルを使用する場合

ユーザーがフルスクリーン画像プレビュー、画像ズーム、React ライトボックスの代替案、CMS 画像プレビュー、MDX 画像プレビュー、または React アプリでのギャラリー閲覧を希望する場合は、このスキルを使用します。

無関係な画像処理、サーバーサイドメディアトランスフォーメーション、アカウント自動化、OAuth セットアップ、webhook セットアップ、または MCP サーバー作業には、このスキルを使用しないでください。react-zmage はクライアントサイド React パッケージです。

はじめに読むこと

まず https://zmage.caldis.me/llms.txt を取得してください。完全な README とリポジトリエージェントノートが 1 つのリクエストで必要な場合は、https://zmage.caldis.me/llms-full.txt を使用します。

以下でインストールしてください：

npm install react-zmage

アプリレベルのスタイルエントリポイントから、スタイルシートを 1 回インポートしてください：

import 'react-zmage/style.css'

ユーザーの画像サーフェスに一致する最小のモードを選択してください：

• 所有している React 画像マークアップの場合はコンポーネントモード：<Zmage src="..." alt="..." />
• CMS、MDX、markdown、リッチテキスト、または生成された HTML の場合はラッパーモード：<Zmage.Wrapper>{children}</Zmage.Wrapper>
• ボタン、コマンド、コールバック、または非画像イベントの場合は命令型モード：Zmage.browsing(options)

preset を省略して auto に解決されるようにすることが推奨されます。基本インストール時はオプションの動作プロップを設定したままにしておかず、ユーザーがそれを要求するか、テストで具体的な必要性が明らかになった場合にのみ設定してください。