React

@becklinks/react puts Beck Links into a React app (React 18 or newer): a provider, a hook that creates links, and a component for the open-in-app banner. It is a thin layer over @becklinks/web, which holds the rules for keys, allowed websites and privacy, so read that page once.

If you use Next.js, use @becklinks/next instead; it re-exports these pieces for Client Components.

Get it: @becklinks/react on npm

Install and set up#

npm install @becklinks/react

Add your site under Web origins in the environment settings first (how), then put the provider near the root:

import { BeckLinksProvider, SmartBanner } from '@becklinks/react';

export function App() {
  return (
    <BeckLinksProvider publishableKey="pk_live_…">
      <SmartBanner
        url="https://acme.becklinks.com/summer"
        title="Open in the Acme app"
        description="Faster checkout and your saved items."
      />
      <Routes />
    </BeckLinksProvider>
  );
}

The provider takes the same options as createBeckLinks (publishableKey, apiUrl, consentGranted, timeoutMs, maxRetries). It creates one client and keeps it while those values stay the same, so passing a new object on every render is fine.

The banner component#

<SmartBanner /> renders nothing in your tree. After the first render in the browser it shows the banner on phones, and it removes it when the component unmounts or its props change. Because it works only after mount, server rendering and hydration are untouched. It takes the options of showBanner as props; onOpen and onDismiss may change on every render without remounting the banner.

Create links#

import { useCreateLink } from '@becklinks/react';

function ShareButton({ productId }: { productId: string }) {
  const { createLink, isPending, error } = useCreateLink();

  async function share() {
    const link = await createLink({
      deepLinkPath: `/product/${productId}`,
      campaign: 'share-button',
    });
    await navigator.share({ url: link.url });
  }

  return (
    <>
      <button
        type="button"
        onClick={() => void share().catch(() => undefined)}
        disabled={isPending}
      >
        Share
      </button>
      {error ? <p role="alert">{error.message}</p> : null}
    </>
  );
}

useCreateLink() returns createLink, link, error, isPending and reset. createLink resolves with the link and rejects with a BeckLinksError, and the state follows along. If you call it twice quickly, only the newest call updates the state.

useBeckLinks() gives you the underlying client when you need it. It throws a clear error when there is no provider above the component.

Verify it works#

1. Use a pk_test_… key and your local origin (for example http://localhost:5173) under Web origins of the Test environment.
2. Open the page in the browser's device mode set to a phone: the banner appears. Select its close button and it disappears.
3. Press your share button: the dashboard lists a new link under Links on your -test host, tagged sdk.
4. If a call fails with origin_not_allowed, the origin is missing from the list; if you see a plain network error, check the browser's network panel. More in Web SDK errors.