Toast

Setup and dispatch

Import the Provider and Toast component from @shopify/app-bridge-react. Only one Provider is needed for your application.

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', shopOrigin: shopOrigin};
    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

Name Type Description Required
content string The content that should appear in the toast message Yes
duration number The length of time in milliseconds the toast message should persist. Defaults to 5000.
error boolean Display an error-styled toast
onDismiss () => void Callback when the dismiss icon is clicked Yes

On this page