⚛

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

2021/09/05に公開

React

Shopify

apps

tech

この記事について

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

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

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

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

Toast

セットアップと発信 | Setup and dispatch

@shopify/app-bridge-reactからProviderとToastのコンポーネントをインポートします。
アプリケーションにはただ一つProviderだけが必要とされます。

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

class MyApp extends React.Component {
  state = {
    showToast: true,
  }

  render() {
    const config = { apiKey: "12345", host: host }
    return (
      <Provider config={config}>
        {this.state.showToast ? (
          <Toast content="Hello world!" onDismiss={this.dismissToast} />
        ) : null}
      </Provider>
    )
  }

  dismissToast = () => {
    this.setState({ showToast: false })
  }
}

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

プロップス | Props

名前	タイプ	説明	必須
content	`string`	Toast メッセージに表示されるコンテンツ	Yes
duration	`number`	Toast メッセージが表示される時間の長さ（ミリ秒単位）。デフォルトは 5000 です。
error	`boolean`	エラースタイルの Toast を表示する
onDismiss	`() => void`	退出ボタンがクリックされたときにコールバック関数が発火する	Yes

Shopify アプリのご紹介

Discussion

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