@stigg/react-sdk v5.32.0

@stigg/react-sdk

Stigg SDK for React single page applications (SPA).

Table of contents

• Installation
• Paywall
• Hooks
• Customization

Installation

Using npm

npm install @stigg/react-sdk

Using yarn

yarn add @stigg/react-sdk

Getting Started

Configure the SDK by wrapping your application in StiggProvider:

import React from 'react';
import ReactDOM from 'react-dom';
import { StiggProvider } from '@stigg/react-sdk';
import App from './App';

ReactDOM.render(
  <StiggProvider apiKey="YOUR_CLIENT_API_KEY">
    <App />
  </StiggProvider>,
  document.getElementById('app'),
);

Paywall

Use Paywall components to render the public pricing page or customer paywall:

<Paywall
  highlightedPlanId="plan-id"
  onPlanSelected={({ plan, customer }) => {
    // Handle customer intention to subscribe to plan
  }}
/>

Hooks

Use useStigg React hook to access stigg Javascript client easily from every component:

import React from 'react';
import { useStiggContext } from '@stigg/react-sdk';

function App() {
  const { stigg } = useStiggContext();

  useEffect(() => {
    // Use stigg Javascript client function
    stigg.getBooleanEntitlement(...)
  })
}

Customization options

The components included in of this package comes with default styling, and you can customize and change the appearance:

Global customization options

You can pass customization options such as theming and locale to StiggProvider component:

import React from 'react';
import ReactDOM from 'react-dom';
import { StiggProvider } from '@stigg/react-sdk';
import App from './App';

// Example of the options that are available for the theme
const theme = {
  palette: {
    primary: '#FFA500',
    backgroundPaper: '#fcfbf8',
    backgroundHighlight: '#FFF3E0',
    outlinedHoverBackground: '#FFE0B2',
  },
  layout: {
    planMinWidth: '250px',
    planMaxWidth: '250px',
    ctaAlignment: 'center',
    headerAlignment: 'center',
    descriptionAlignment: 'center',
  },
  typography: {
    bodyFontFamily: 'Courier New',
    headingFontFamily: 'Courier New',
  },
};

ReactDOM.render(
  <StiggProvider apiKey="YOUR_CLIENT_API_KEY" theme={theme} locale="de-DE">
    <App />
  </StiggProvider>,
  document.getElementById('app'),
);

Component level customization options

You can pass customization options per component, for example customize the paywall text:

const textOverrides = {
    highlightChip: 'Best value',
    planCTAButton: {
        startTrial: (plan: PaywallPlan) => `Start trial (${plan.defaultTrialConfig.duration} days)`,
        upgrade: 'Start now',
        custom: 'Contact us',
    },
    price: {
        custom: 'Contact us',
    },
}

<Paywall
    highlightedPlanId="plan-id"
    onPlanSelected={({ plan, customer }) => {
        // Handle customer intention to subscribe to plan
    }}
    textOverrides={textOverrides}
/>