TypeScript icon, indicating that this package has built-in type declarations

0.0.35 • Public • Published

Customer Account UI Extensions (React)

This library provides utilities for writing Customer Account UI extensions using React.


$ yarn add @shopify/customer-account-ui-extensions-react


To use the React bindings in a UI extension, start by importing React as you normally would. All of the core features of React are available, including hooks, context, and more.

import {Button, render} from '@shopify/customer-account-ui-extensions-react';

render('CustomerAccount::FullPage::RenderWithin', () => <App />);

interface Props {}

function App(_: Props) {
  return (
      onPress={() => {
      Press me

If you’ve ever used React on the web, you’re probably used to returning DOM nodes as part of your React components. Because UI extensions execute in a web worker and have no access to the DOM, returning DOM components is an error in UI extensions. Instead, you can return the components you import from @shopify/customer-account-ui-extensions-react, which are the equivalent of the DOM in Customer Account — they are the “leaf” elements, the lowest-level UI primitives that exist.

For example, the following will throw an error:

import {render} from '@shopify/customer-account-ui-extensions-react';

render('CustomerAccount::FullPage::RenderWithin', () => <App />);

interface Props {}

function App(_: Props) {
  return <div>No HTML tag allowed</div>;

Other React-specific APIs


useExtensionApi is a custom React hook that gives you access to the full input argument provided to your extension point (this is the value that, if you were registering an extension point directly with shopify.extend, would be passed as the second argument to your callback). This allows you to access and call the main APIs between your extension and Shopify anywhere in your React component.

If you are using TypeScript, you can supply the name of the extension point as a type parameter to this function. Doing so will refine the return type to be exactly the input type for that extension point, so make sure you pass the name of the extension you are actually rendering.

import {
} from '@shopify/customer-account-ui-extensions-react';

render("CustomerAccount::FullPage::RenderWithin", () => <App />);

function App() {
  const {customerApi, extension, features, i18n} = useExtensionApi();

  return (
      onPress={() => {
        console.log({customerApi, extension, features, i18n});
      Log extension API to console

This hook can only be called if you registered your extension with render, as that callback wraps the application in the necessary React context to make the input available anywhere in the tree.




npm i @shopify/customer-account-ui-extensions-react

DownloadsWeekly Downloads






Unpacked Size

137 kB

Total Files


Last publish


  • shopify-admin
  • maryharte
  • crisfmb
  • pmoloney89
  • netlohan
  • st999999
  • justin-irl
  • megswim
  • michaelarsenault
  • wcandillon
  • jplhomer
  • marytal
  • nathanpjf
  • shopify-dep
  • goodforonefare
  • lemonmade
  • vsumner
  • wizardlyhel
  • antoine.grant
  • tsov
  • andyw8-shopify
  • henrytao
  • hannachen
  • andrewapperley
  • iainmcampbell
  • vividviolet
  • bpscott