Modal

Setup and open

Import the Provider and Modal 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, Modal} from '@shopify/app-bridge-react';

function MyApp() {
  const config = {apiKey: '12345', shopOrigin: shopOrigin};
  return (
    <Provider config={config}>
      <Modal title="My modal" message="Hello world!" open />
    </Provider>
  );
}

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

Props

Name Type Description Required
open boolean Whether the modal is open or not Yes
src string The url that will be loaded as the content of the modal
title string The content for the title of the modal
size "Small", "Medium", "Large", "Auto" Controls the size of the modal
message string Message to display inside modal
primaryAction ActionProps Primary action
secondaryActions ActionProps[] Collection of secondary actions
onClose () => void Callback when the modal is closed

ActionProps

Name Type Description Required
content string Content the action displays
destructive boolean Should the action be styled as destructive
disabled boolean Should the action be disabled
external boolean Forces url to open in a new tab
target "ADMIN_PATH", "REMOTE", "APP" Where to display the target link
url string A destination to link to
onAction () => void Callback when an action takes place

Sign up for a Partner account to get started.

Sign up