@pack/react – Pack Digital

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" />
          <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.

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 within 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

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} />
      </>
    );
  }