The Polaris autocomponents are a set of components that are styled using Shopify's Polaris design system and are designed to be used in Shopify apps. These components have the base autocomponent props and the Polaris design system overrides.
For more information on the autocomponents, see the @gadgetinc/react/auto references.
Installing
If you did not select the Shopify app type when creating your app, you will need to install Shopify Polaris and set up the Polaris provider and stylesheet in your app.
Install the following dependencies:
install the Polaris library and the latest version of @gadgetinc/react
yarn add @shopify/polaris @shopify/polaris-icons
Now import the Polaris provider and required style.css file. Add the following imports to the top of your web/components/App.jsx file:
web/components/App.jsx
React
import { AppProvider } from "@shopify/polaris";
import "@shopify/polaris/build/esm/styles.css";
import { AppProvider } from "@shopify/polaris";
import "@shopify/polaris/build/esm/styles.css";
Then replace your Layout component in the same file with the following code to make use of the Polaris provider:
To render a custom popup when a user selects an action, create a custom action and use it to show a modal:
action with a custom render
React
import { AutoTable } from "@gadgetinc/react/auto/polaris";
import { api } from "../api";
import { Modal, TitleBar, useAppBridge } from "@shopify/app-bridge-react";
export default function () {
const shopify = useAppBridge();
return (
<>
<AutoTable
model={api.product}
actions={[
{
label: "Export",
action: async (records) => {
// show the modal when the action is clicked
shopify.modal.show("my-modal");
},
},
]}
/>
{/** use the Shopify AppBridge modal component */}
<Modal id="my-modal">
<p>Message</p>
<TitleBar title="My modal">
<button onClick={() => shopify.modal.hide("my-modal")}>Close</button>
</TitleBar>
</Modal>
</>
);
}
import { AutoTable } from "@gadgetinc/react/auto/polaris";
import { api } from "../api";
import { Modal, TitleBar, useAppBridge } from "@shopify/app-bridge-react";
export default function () {
const shopify = useAppBridge();
return (
<>
<AutoTable
model={api.product}
actions={[
{
label: "Export",
action: async (records) => {
// show the modal when the action is clicked
shopify.modal.show("my-modal");
},
},
]}
/>
{/** use the Shopify AppBridge modal component */}
<Modal id="my-modal">
<p>Message</p>
<TitleBar title="My modal">
<button onClick={() => shopify.modal.hide("my-modal")}>Close</button>
</TitleBar>
</Modal>
</>
);
}
If you want to use AutoComponents within a modal, you should make sure to add the AppProvider component from Shopify's Polaris library as a wrapper for the component. Without the app provider, popovers and dropdowns won't render properly.