@bagdock/loyalty-react

  ----++                                ----++                    ---+++     
  ---+++                                ---++                     ---++      
 ----+---     -----     ---------  --------++ ------     -----   ----++----- 
 ---------+ --------++----------++--------+++--------+ --------++---++---++++
 ---+++---++ ++++---++---+++---++---+++---++---+++---++---++---++------++++  
----++ ---++--------++---++----++---++ ---++---++ ---+---++     -------++    
----+----+---+++---++---++----++---++----++---++---+++--++ --------+---++   
---------++--------+++--------+++--------++ -------+++ -------++---++----++  
 +++++++++   +++++++++- +++---++   ++++++++    ++++++    ++++++  ++++  ++++  
                     --------+++                                             
                       +++++++                                               

@bagdock/loyalty-react

React components for embedding Bagdock Loyalty — referral widgets, rewards, points, and leaderboards with built-in theming.

Install

npm install @bagdock/loyalty-react @bagdock/loyalty react react-dom

Quick start

import { BagdockLoyaltyProvider, ReferralWidget, PointsDisplay } from '@bagdock/loyalty-react'

function App() {
  return (
    <BagdockLoyaltyProvider embedToken="etk_live_..." memberId="mem_abc123">
      <PointsDisplay />
      <ReferralWidget />
    </BagdockLoyaltyProvider>
  )
}

Components

<BagdockLoyaltyProvider>

Wraps your app to configure the Loyalty client and theming.

Prop	Type	Description
apiKey	string	API key for direct operator use
embedToken	string	Embed token (preferred for client-side)
platformApiKey	string	Platform API key (pak_...) for embedded use
baseUrl	string	API base URL override
operatorId	string	Operator ID (required with platformApiKey)
memberId	string	Pre-identified member ID
appearance	BagdockAppearance	Theming object
brandName	string	Operator brand name
logoUrl	string	Operator logo URL

<ReferralWidget>

Full referral sharing widget with link generation and sharing options.

<ReferralCard>

Individual referral card with status and reward info.

<RewardsDisplay>

Shows available rewards and redemption options.

<PointsDisplay>

Displays the member's current point balance and history.

<LeaderboardWidget>

Referral leaderboard showing top referrers.

Hooks

Hook	Returns	Description
useLoyalty()	LoyaltyContextValue	Access the Loyalty context (client, theme)

Theming

Customize with a Stripe/Clerk-style appearance prop:

import { BagdockLoyaltyProvider } from '@bagdock/loyalty-react'
import { themes } from '@bagdock/loyalty-react/themes'

<BagdockLoyaltyProvider
  embedToken="etk_live_..."
  appearance={{
    theme: 'dark',
    variables: {
      colorPrimary: '#6366f1',
      borderRadius: '12px',
    },
  }}
>
  {children}
</BagdockLoyaltyProvider>

Preset themes

import { themes } from '@bagdock/loyalty-react/themes'
// themes.default, themes.dark, themes.minimal, etc.

Platform partners

For platforms embedding loyalty on behalf of operators:

<BagdockLoyaltyProvider
  platformApiKey="pak_live_..."
  operatorId="opreg_wisestorage"
  memberId="mem_abc123"
>
  <PointsDisplay />
</BagdockLoyaltyProvider>

License

MIT