@pack/react

The @pack/react package provides SDKs and components to enable your React app to connect with Pack.

Quick Start

Install with a package manager:

npm install @pack/react

Here is a list of exports from this package:

import {
  registerSection,
  registerStorefrontSettingsSchema,
  useSiteSettings,
  PreviewProvider,
  RenderSections,
} from '@pack/react'

<PreviewProvider />

The <PreviewProvider /> component is a React provider for your app and will give context for important info such as siteSettings, previewInfo, and more.

<PreviewProvider/> props

interface PreviewContentProps {
  children: ReactNode;
  siteSettings: any;
  isPreviewModeEnabled?: boolean;
}

Example

  //root.tsx
  import { PreviewProvider } from '@pack/react';
  ...

  export default function App() {
    const { siteSettings, isPreviewModeEnabled } = useLoaderData();

    return (
      <html lang="en">
        <head>
          <meta charSet="utf-8" />
          <meta name="viewport" content="width=device-width,initial-scale=1" />
          <meta name="referrer" content="origin" />
          <Seo />
          <Meta />
          <Links />
        </head>

        <body>
          <PreviewProvider
            isPreviewModeEnabled={isPreviewModeEnabled}
            siteSettings={siteSettings}
          >
              <Outlet />
          </PreviewProvider>
        </body>
      </html>
    );
  }

registerSection()

registerSection is a function that will register your React components to become Sections. If you create a component and want to make it an editable section on your storefront, it is important to register it with this function.

Usage

Here at Pack, we recommend creating a sections/ folder in the project where all your sections will live. This sections/ folder will export a registerSections utility function that makes it easy to register all your sections in the root of your app.

Here is an example from our Blueprint Theme of how to use registerSections() in your storefront's root.tsx.

Arguments

  • Name
    section
    Type
    React.ComponentType<any> & { Schema?: Schema }
    Description

    The React component that you want to become an interactable section in your storefront and the Customizer.

  • Name
    name
    Type
    string
    Description

    A unique name for this section.

Example

  import { registerSection } from '@pack/react';

  import { Hero } from './Hero';
  import { FiftyFiftyHero } from './FiftyFiftyHero';
  import { TextBlock } from './TextBlock';
  import { Image } from './Image';
  import { HTML } from './HTML';

  export { Hero, FiftyFiftyHero, TextBlock };

  export function registerSections() {
    registerSection(Hero, { name: 'hero' });
    registerSection(FiftyFiftyHero, { name: 'fifty-fifty-hero' });
    registerSection(TextBlock, { name: 'text-block' });
    registerSection(Image, { name: 'image-block' });
    registerSection(HTML, { name: 'html-block' });
  }

<RenderSections />

The <RenderSections /> component will take in your page content data and return an array of React components that you have registered as sections.

Example

  //_index.tsx
  import { useLoaderData } from '@remix-run/react';
  import { defer, LoaderArgs } from '@shopify/remix-oxygen';
  import { RenderSections } from '@pack/react';


  export async function loader({ context }: LoaderArgs) {
    const { data } = await context.pack.query(HOME_PAGE_QUERY);

    return defer({
      page: data.page,
    });
  }

  export default function Index() {
    const { page } = useLoaderData();

    return (
      <div className="grid gap-4">
        <RenderSections content={page} />
      </div>
    );
  }

registerStorefrontSettingsSchema()

Similar to registerSection, the registerStorefrontSettingsSchema is a function that will register your site settings schema to be editable withing the Customizer. This will allow you to create a global setting for your store to be used for headers, footers, etc. You can access these settings by using the useSiteSettings hook.

Usage

Here at Pack, we recommend creating a settings/ folder in the project where all your site settings will live. This settings/ folder will export a registerSiteSettings utility function that makes it easy to register all your settings in the root of your app.

Arguments

  • Name
    settings
    Type
    Array<Schema>
    Description

    An array of schemas that define your site settings. Note, the schema structure is the same as what you would use in a section.

Example

  import {registerStorefrontSettingsSchema} from '@pack/react';

  import footer from './footer';

  export function registerSiteSettings() {
    registerStorefrontSettingsSchema([footer]);
  }

useSiteSettings()

The useSiteSettings hook allows you to access the structured data that you defined with your site settings schema. This hook must be used with the <PreviewProvider/> component.

Usage

Here at Pack, we recommend creating a sections/ folder in the project where all your sections will live. This sections/ folder will export a registerSections utility function that makes it easy to register all your sections in the root of your app.

Example

  import {ReactNode} from 'react';
  import {Header} from './Header';
  import {Footer} from './Footer';
  import {useSiteSettings} from '@pack/react';

  export function Layout({
    children,
  }: {
    siteSettings?: Record<string, any>;
    children: ReactNode;
  }) {
    const siteSettings = useSiteSettings();
    return (
      <>
        <Header settings={siteSettings?.settings?.header} />
        <main role="main" id="mainContent" className="flex-grow py-4">
          {children}
        </main>
        <Footer settings={siteSettings?.settings?.footer} />
      </>
    );
  }

Was this page helpful?