gamification-react-streak

A React SDK that provides prebuilt streak UI components with theming and configuration support.

Installation

npm install gamification-react-streak

Basic Usage

The frontend never uses your secret. Your backend should generate a signature and timestamp, then pass them to the frontend.

import React, { useEffect, useState } from "react";
import { StreakProvider, StreakView } from "gamification-react-streak";

export default function App() {

function generateHmacSignature(
    method: string,
    path: string,
    timestamp: string,
    body: string,
    secret: string
  ) {
    const canonicalString = `${method}\n${path}\n${timestamp}\n${body}`;
    const hash = HmacSHA256(canonicalString, secret);
    const signature = hash.toString(Hex);
    return `hmac-sha256=${signature}`;
  }

  const getSignature = (path: string, method: string) => {
    const timestamp = Math.floor(Date.now() / 1000).toString();
    const signature = generateHmacSignature(method, path, timestamp, "", secret);
    return { signature, timestamp };
  };

  return (
    <StreakProvider>
     <StreakView
      title="My Streaks"
      tenantId="tenant_123"
      userId="user_456"
      getSignature={getSignature}
      baseUrl="wss://query-gateway.example.com"
      theme={{
      color: "#5bc301",
      fontFamily: "Inter, sans-serif",
      borderRaduis: "16px",
      padding: "20px"
    }}
  />
</StreakProvider>
  );
}

## Components

### `StreakProvider`

Context provider required for all streak components.

```tsx
<StreakProvider>
  {children}
</StreakProvider>

StreakView

Displays all streaks for a user. Clicking a streak opens its detailed view.

Props

| Prop | Type | Required | Description | | ---------- | ------------- | -------- | ---------------------------------------------------------- | | title | string | Yes | Page title | | tenantId | string | Yes | Tenant Id | | baseUrl | string | Yes | base url | | getSignature | SignFunc | Yes | Function that turn the timestamp an d signiture | | tenantId | string | Yes | Tenant identifier | | userId | string | Yes | User identifier | | theme | ThemeConfig | No | UI customization options |

Theme Properties (Optional)

| Property | Type | Description | | ---------------- | -------- | ----------------------------------------- | | color | string | Main color used across the Streak UI. | | fontFamily | string | Font family applied to all text. | | borderRadius | string | Border radius for components. | | padding | string | Padding around the leaderboard container. |

Sinature Function

| Property | Type | Description | | ---------------- | -------- | ----------------------------------------- | | signature | string | Signature that is generated | | timestamp | string | Timestamp that is generated. |