⚛

【Shopify.dev和訳】App Bridge/React components/Loading

2021/09/05に公開

React

Shopify

apps

tech

この記事について

この記事は、App Bridge/React Component/Loading の記事を和訳したものです。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

ローディング

Loadingコンポーネントは、マーチャントにページの読み込み中やアップロードの処理中を示すために使用されます。新しいページをロードするときや、数秒以上かかる可能性のある非同期リクエストを完了するときにLoadingコンポーネントをレンダリングします。

設定方法

ProviderとLoadingコンポーネントを@shopify/app-bridge-reactからインポートします。アプリケーションに必要なProviderは 1 つだけです。

Loadingコンポーネントを条件付きでレンダリングするのは、一般的なパターンです。

import React from "react"
import ReactDOM from "react-dom"
import { Provider, Loading } from "@shopify/app-bridge-react"

function MyApp() {
  const config = { apiKey: "12345", host: host }

  const loading = isTheAppLoading()
  const loadingComponent = loading ? <Loading /> : null

  return <Provider config={config}>{loadingComponent}</Provider>
}

const root = document.createElement("div")
document.body.appendChild(root)
ReactDOM.render(<MyApp />, root)

Shopify アプリのご紹介

Discussion

ログインするとコメントできます