Swish React

Lightweight React/Preact bindings for the Swish SDK. Use Swish’s features directly in your React app with simple hooks and a provider-based setup.

Installation

npm install @swishapp/react
# or
yarn add @swishapp/react
# or
pnpm add @swishapp/react

Quick Start

1. Wrap your app with SwishProvider

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

const config = {
  // your Swish SDK config
};

function App() {
  return (
    <SwishProvider config={config}>
      <YourApp />
    </SwishProvider>
  );
}

2. Use Swish hooks in your components

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

interface SaveButtonProps {
  productId: string;
  variantId?: string;
}

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

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

Documentation

Full documentation, examples, and API reference are available at:

👉 https://swish.app/docs/react