This package provides a set of utilities to help you build Shopify extensions. Extensions written in either React or JavaScript/Typescript are supported.
This is a companion package to the JavaScript API client package generated for your Gadget app. You must first install the JS client for your app, and then install this package.
To install the JS client for your app, you must set up the Gadget NPM registry, and then install the client:
Install the JS client for your app
npm config set @gadget-client:registry https://registry.gadget.dev/npm
npm install @gadget-client/example-app
npm config set @gadget-client:registry https://registry.gadget.dev/npm
11// write the rest of your extension as you normally would
12 root.appendChild(
13 root.createComponent(
14Button,
15{to:"extension:/"},
16 i18n.translate("menuItemButton")
17)
18);
19});
React extensions
Within a Shopify React extension, you must wrap your extension in a Provider component to provide the API client and session token to the rest of your extension.
You can then use useGadget to access your API client that has been setup for Shopify session token authentication.
Note that React helpers are imported using the @gadgetinc/shopify-extensions/react path.
Registers the session token with the API client for use with Shopify session token authentication for JS/TS extensions.
Parameters
api: Client - The Gadget API client to use for the extension
sessionToken: SessionToken - The session token to use for authentication
Provider
A Provider component that wraps your React extension to provide the API client and session token to the rest of your extension.
Props
api: Client - The Gadget API client to use for the extension
sessionToken: SessionToken - The session token to use for authentication
useGadget()
useGadget(): { ready: boolean, api: Client }
A React hook that returns the Gadget API client and a boolean indicating whether the client is ready to authenticate with Shopify session token authentication.
Returns
api: Client - The Gadget API client that can be used to make API calls in an extension
ready: boolean - A boolean indicating whether the client is ready to authenticate with Shopify session token authentication