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

2 min read

この記事について

株式会社 UnReact はプロジェクトの一環としてShopify 開発者ドキュメントの和訳を行っています。

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

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

Toast

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

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

次の例では、認証プロセス中にhostを保存し、それからコードが正しく機能するために取得する必要があります。このプロセスの詳細についてはホストの取得を参照してください。

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

Discussion

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