<aside> 🖇️ 備考 UXPin Merge へのアクセスをご希望の方は、こちらからサインアップしてください。

</aside>

<aside> 💡 Merge CLIの最新バージョン：3.4.6

</aside>

この記事では、MergeテクノロジーによってUXPinアカウントに統合されたReact.jsコンポーネントを使用する方法を説明します。技術的な統合ガイドをお探しの方は、 Mergeでライブラリの作成をご覧ください

UsingReact_02.mp4

Merge へのアクセス方法は？

アクセス方法において次の２つがあります。

UXPin Mergeの開発環境がある（お持ちのコンポーネントやサンプルなどをライブラリと統合するための）

UXPinアカウントと連携されているMergeライブラリ（コード化されたコンポーネントがUXPinアカウントに反映されている場合）

具体的に：

• お持ちのコンポーネントを統合したい場合 - こちらの手順に従ってください。
• コンポーネントが既にUXPinアカウントに統合済み（チームメンバーが統合した）の場合などで、使い方について知りたい場合はこのままページを最後までお読みください。
• コンポーネントがアカウントに統合されておらず、どうしたらよいかわからない場合は、アカウントの管理者までお問い合わせください。

コンポーネントの追加

コンポーネントの追加は、UXPinの通常のデザインシステムライブラリと同じような手順です。コンポーネントをドラッグ＆ドロップして、キャンバス上に配置・調整すれば完了です。

UsingReact_02 (1).mp4

<aside> 🖇️ 備考 コンポーネントのサイズの調整は、コンポーネントのコーディング方法に依存します。コンポーネントの幅や高さがCSSで定義されている場合、Reactコンポーネントにpropsで値を渡さない限り、UXPinでサイズを調整することはできません。Mergeは、アプリ制作で使用するコードとまったく同じコードを使用します。

</aside>

ネストされたコンポーネントの操作

コンポーネントが入れ子構造を可能にする場合、操作可能です。

uxpincommunity_6fe63283-80b6-487f-8320-61d203eb80f7_webp.net-resizeimage (1).avif