⚛

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

2021/09/05に公開

React

Shopify

apps

tech

この記事について

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

Shopify アプリのご紹介

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

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

TitleBar

設定方法

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

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

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

  const primaryAction = { content: "Foo", url: "/foo" }
  const secondaryActions = [{ content: "Bar", url: "/bar" }]
  const actionGroups = [{ title: "Baz", actions: [{ content: "Baz", url: "/baz" }] }]

  return (
    <Provider config={config}>
      <TitleBar
        title="Hello world!"
        primaryAction={primaryAction}
        secondaryActions={secondaryActions}
        actionGroups={actionGroups}
      />
    </Provider>
  )
}

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

Props

名前	タイプ	説明	必須
title	`string`	タイトルバーのタイトル	yes
breadcrumbs	`Breadcrumb[]`	パンくずの配列
primaryAction	`ActionProps`	TitleBar のプライマリアクション
secondaryActions	`ActionProps[]`	TitleBar のセカンダリーアクションの配列
actionGroups	`ActionGroupProps[]`	セカンダリーアクションのタイトルバーグループの配列

名前	タイプ	説明
content	`string`	アクションが表示するコンテンツ
url	`string`	リンク先を指定します。
target	`"ADMIN_PATH"`, `"REMOTE"`, `"APP"`	リンク先を表示する場所
onAction	`() => void`	アクションが起きたときのコールバック

ActionProps

名前	タイプ	説明
content	`string`	アクションが表示するコンテンツ
destructive	`boolean`	アクションを破壊的なスタイルにします。
disabled	`boolean`	アクションを無効にします。
external	`boolean`	強制的に URL を新しいタブで開きます。
target	`"ADMIN_PATH"`, `"REMOTE"`, `"APP"`	ターゲットリンクを表示する場所。
url	`string`	リンク先を指定します。
onAction	`() => void`	アクションが発生したときのコールバック

ActionGroupProps

名前	タイプ	説明	必須
title	`string`	アクショングループのタイトル	Yes
actions	`ActionProps[]`	アクションのリスト	Yes

Polaris の<Page>コンポーネントで<TitleBar>を使用する

埋め込みアプリの機能と一緒に使用する場合、Polaris <Page>コンポーネントはまだ重要なレイアウト要素をレンダリングします。App Bridge React の<TitleBar>はそうではありません。このため、推奨される移行パスは、<Page>要素を維持しつつ、そのプロップを代わりに<TitleBar>に渡すことです。

以下の例では、非推奨の Polaris 埋め込みアプリ機能の使用から始まる移行パスを示しています。

import { AppProvider, Page } from "@shopify/polaris"

render(
  <AppProvider apiKey="api_key" host="example.myshopify.com">
    <Page
      title="My App using legacy code"
      breadcrumbs={[{ content: "Breadcrumb" }]}
      primaryAction={primaryAction}
      secondaryActions={secondaryActions}
      actionGroups={actionGroups}
    >
      {content}
    </Page>
  </AppProvider>
)

推奨される移行パスでは、App Bridge React と Polaris の<Page>コンポーネントを使用します。

import { AppProvider, Page } from "@shopify/polaris"
import { Provider as AppBridgeProvider, TitleBar } from "@shopify/app-bridge-react"

render(
  <AppProvider>
    <AppBridgeProvider config={{ apiKey: "api_key", host: "example.myshopify.com" }}>
      <Page>
        <TitleBar
          title="My App using up-to-date code"
          breadcrumbs={[{ content: "Breadcrumb" }]}
          primaryAction={primaryAction}
          secondaryActions={secondaryActions}
          actionGroups={actionGroups}
        />
        {content}
      </Page>
    </AppBridgeProvider>
  </AppProvider>
)

Shopify アプリのご紹介

Discussion

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