> ## Documentation Index
> Fetch the complete documentation index at: https://swish.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> React bindings for the Swish SDK - a provider and hooks for integrating Swish into React and Next.js apps.

`@swishapp/react` provides a React context provider and hooks that wrap the [Swish SDK](https://swish.app/docs/references/sdk/overview.md). Use it to add save buttons, wishlists, and item counts to any React or Next.js storefront.

```bash npm theme={null}
npm install @swishapp/react
```

```bash pnpm theme={null}
pnpm add @swishapp/react
```

```bash yarn theme={null}
yarn add @swishapp/react
```

## Quick start

Wrap your app in `SwishProvider` and use hooks to interact with saved items.

```tsx theme={null}
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>
  );
}
```

> [!NOTE]
>
> The SDK is client-only by design. All state loads in the browser after mount
> to have no effect on initial render performance. `SwishProvider` can be
> rendered in SSR and RSC contexts, but the SDK does not initialize until the
> client.

## API reference

> [card] [SwishProvider](https://swish.app/docs/references/react/provider.md)
>
> Context provider that loads the SDK and makes it available to hooks.

> [card] [Hooks](https://swish.app/docs/references/react/hooks.md)
>
> useSwish, useSwishItem, useSwishItems, useSwishLists, useSwishItemCount,
> useSwishQuery, and useSwishIntent.

## Types

The package re-exports all types from `@swishapp/sdk`, so you can import SDK types directly:

```ts theme={null}
import type { SwishApp, Item, List, Intent, EventName } from "@swishapp/react";
```

See the [SDK reference](https://swish.app/docs/references/sdk/overview.md) for the full type surface.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.