Overview

import { SwishProvider, useSwishItem } from "@swishapp/react";

function App() {
  return (
    <SwishProvider
      options={{
        storefront: {
          storeDomain: "my-store.myshopify.com",
          accessToken: "your-storefront-access-token",
        },
        context: {
          customer: {
            id: customerId,
            email: customerEmail,
            firstName: customerFirstName,
            lastName: customerLastName,
          },
          localization: { country: "US", language: "EN", market: "us" },
          myshopifyDomain: "my-store.myshopify.com",
          shopName: "My Store",
          newCustomerAccounts: true,
          routes: { accountUrl: "/account" },
        },
      }}
    >
      <SaveButton productId="gid://shopify/Product/8234567890123" />
    </SwishProvider>
  );
}

function SaveButton({ productId }: { productId: string }) {
  const { saved, toggle, loading } = useSwishItem({ productId });

  return (
    <button type="button" onClick={toggle} disabled={loading}>
      {saved ? "Saved" : "Save"}
    </button>
  );
}

import type { SwishApp, Item, List, Intent, EventName } from "@swishapp/react";