@whole_software/shopify-react-router

Shared hooks, components, and Vite config for Shopify apps built with React Router v7.

Install

pnpm add @whole_software/shopify-react-router

Hooks

useAppWindow(channelName?)

BroadcastChannel wrapper for signaling between routes (e.g., editor → list page).

import { useAppWindow } from "@whole_software/shopify-react-router";

// In the editor route — after save:
const { broadcastRevalidate } = useAppWindow();
broadcastRevalidate();

// In the list route — listen for updates:
const { listenRevalidate } = useAppWindow();
useEffect(() => listenRevalidate(() => revalidator.revalidate()), []);

useActionToast(actionData)

Show a Shopify toast from a React Router action response.

import { useActionToast } from "@whole_software/shopify-react-router";

// In your loader/action, return: { toast: { message: "Saved!", tone: "success" } }
// In your component:
const actionData = useActionData<typeof action>();
useActionToast(actionData);

Components

<PlanGate>

Blur-lock UI behind a plan check.

import { PlanGate } from "@whole_software/shopify-react-router";

<PlanGate allowed={canAccessPlan(plan, "pro")} pricingPath="/app/pricing" label="Pro feature">
  <AdvancedSettings />
</PlanGate>

Props: allowed: boolean, pricingPath: string, label?: string (default: "Pro feature")

Vite Config

// vite.config.ts
import { createShopifyViteConfig } from "@whole_software/shopify-react-router/config";

export default createShopifyViteConfig({ port: 3002 });

Options: port?: number, plugins?: PluginOption[], override?: UserConfig

License

MIT