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 |