React SDK
Preview React components and hooks for showing a member's streak. Not yet on npm.
Preview, not yet on npm. @streakdev/react isn't published, so installing it fails today. This page describes the preview API so you can plan for it.
What works today
Load the widget script once the signed-in member is known. It works in any React app without a package:
import { useEffect } from "react";
export function StreakfoxWidget({ memberId }: { memberId: string }) {
useEffect(() => {
const script = document.createElement("script");
script.src = "https://cdn.streakfox.com/widget.js";
script.dataset.project = "YOUR_PROJECT_KEY";
script.dataset.event = "YOUR_ACTION";
script.dataset.member = memberId;
script.defer = true;
document.body.appendChild(script);
}, [memberId]);
return null;
}Render it once per page. Count actions from your backend with your program's
incoming URL, after verifying the signed-in member and
confirming that the action succeeded. Send the same memberId as the member
field, plus a stable completion_id. Streakfox hashes that value within your
project; data-member selects the same progress for display. The incoming URL
contains a secret and belongs only in your backend's private environment.
data-member displays counts and milestone messages. Protected coupon codes and
reward links require signed identity. The
Next.js guide shows the matching server request.
What the package will do
The React SDK shows progress. It doesn't count actions.
The preview provider below takes userHash, the already-derived Streakfox member
hash. Its identity contract is separate from the hosted widget's data-member
example above; a raw email or platform ID is not a userHash.
Provider and hook
"use client";
import { StreakProvider, useStreak } from "@streakdev/react";
function StreakSummary() {
const { streak, week, isLoading } = useStreak();
if (isLoading) return <p>Lighting the fire…</p>;
return (
<p>
{streak?.current ?? 0} day streak. {week.filter((day) => day.isCheckedIn).length} of the last
7 days.
</p>
);
}
export function StreakPanel({ memberId }: { memberId: string }) {
return (
<StreakProvider projectId="YOUR_PROJECT_KEY" event="YOUR_ACTION" userHash={memberId}>
<StreakSummary />
</StreakProvider>
);
}| Prop | What it does |
|---|---|
projectId | Your project key. Required. |
event | Your action. |
userHash | The member ID you count with. |
identityToken | Short-lived signed identity token. Needed before reward values are revealed. |
apiBase | API endpoint. Defaults to https://api.streakfox.com. |
Components
StreakCounter, StreakCalendar and StreakMilestone render inside a StreakProvider. StreakWidget renders the hosted widget and takes the same props as the provider.
import { StreakCalendar, StreakCounter, StreakMilestone } from "@streakdev/react";
export function StreakCard() {
return (
<>
<StreakCounter size="lg" />
<StreakCalendar view="week" />
<StreakMilestone />
</>
);
}