@pack/react

React UI primitives for rendering Pack content and storefront configuration.

Install

npm install @pack/react

Main exports

• PackProvider / PreviewProvider
• RenderSections, useSections
• registerSection
• registerStorefrontSettingsSchema
• usePackContext, useSiteSettings, useLocale
• PackErrorBoundary

Usage

import { PackProvider, RenderSections } from '@pack/react';

export function App({
  sections,
  siteSettings,
  packSessionId,
  isPreviewModeEnabled,
  packErrorTracking,
}: Props) {
  return (
    <PackProvider
      siteSettings={siteSettings}
      packSessionId={packSessionId}
      isPreviewModeEnabled={isPreviewModeEnabled}
      packErrorTracking={packErrorTracking}
    >
      <RenderSections sections={sections} />
    </PackProvider>
  );
}

packSessionId and packErrorTracking can be passed from ...pack.getPackContextData() when using @pack/hydrogen.

Development

yarn
yarn build
yarn test