React

Use @givebear/react to render Givebear widgets as React components. The package loads the browser SDK from givebear.io once, mounts widgets into React-managed elements, and cleans them up on unmount, so strict mode and re-renders are safe.

Install

npm install @givebear/react

React 18 or newer is required. Nothing else is bundled: the SDK script loads from https://givebear.io/sdk/givebear.js at runtime.

Render a widget

Every widget is a component. Props mirror the SDK config fields from the configuration reference.

import { DonationForm } from "@givebear/react";

export function GivePage() {
  return <DonationForm organizationId="your-org-id" />;
}

Available components: DonateButton, DonationCard, DonationForm, Thermometer, CampaignHero, SupportersTicker, EventCard, PrayerTimes, and Calendar. Each renders the same widget you can see live in snippet examples.

import { CampaignHero, SupportersTicker } from "@givebear/react";

export function CampaignPage() {
  return (
    <>
      <SupportersTicker organizationId="your-org-id" campaignId="your-campaign-id" />
      <CampaignHero organizationId="your-org-id" campaignId="your-campaign-id" />
    </>
  );
}

Embedded donations for platforms

If you run a Connect platform, mint an embed session from your backend and render it with EmbeddedDonation. The session pins the org, target, amounts, donor prefill, and attribution server-side. See Embedded donations for the full flow.

import { EmbeddedDonation } from "@givebear/react";

export function Checkout({ sessionToken }: { sessionToken: string }) {
  return <EmbeddedDonation sessionToken={sessionToken} />;
}

Fallback links

Every widget component renders a plain link to its hosted Givebear page (by stable id, so it survives slug changes) until the widget mounts. If the SDK script never loads (crawlers, script blockers, network failure), the link stays, so there is always a working path to the donation page. You get the same resilience the fallback markup in the HTML snippets provides, without writing anything.

Use the fallback prop to replace the default with your own content, or pass null to render no fallback:

<DonateButton
  organizationId="your-org-id"
  fallback={<a href="https://example.org/give">Give to us</a>}
/>

<DonateButton organizationId="your-org-id" fallback={null} />

Calendar, PrayerTimes, and EmbeddedDonation have no hosted page to link to, so they render no fallback unless you pass one.

Server-side rendering

The components render the fallback link inside an empty container on the server and mount the live widget in the browser once the SDK loads. No dynamic imports are needed in Next.js or other SSR frameworks.

Load the SDK yourself

loadGivebear() returns the same promise the components use. It resolves with the window.Givebear API, or null on the server and on script failure.

import { loadGivebear } from "@givebear/react";

const gb = await loadGivebear();
gb?.open({ organizationId: "your-org-id" });

Related