@stigg/react-sdk

@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

Import the styles:

import '@stigg/react-sdk/dist/styles.css';

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

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}
/>

Development

Develop with storybook

• Install dependencies using yarn:

yarn

• Create .env.local file and add the following environment variables:

BASE_URI='http://localhost:4000'
API_KEY='<your-api-key>'

• Run storybook, it will open storybook on http://localhost:6006

yarn storybook

Link package

• Run yarn link-sdk
• Go to the package that you want to use the react-sdk linked package, and run:

yarn link "@stigg/react-sdk" && yarn link "react" && yarn link "react-dom"

NOTE: It's required to link also react and react-dom packages because otherwise it complains about multiple react versions error (see issue here)

Publish beta version

• Change package.json version to desired beta version in the format of x.x.x-beta.x
• Make sure to do a clean build -- rm -rf dist & yarn build
• Publish to npm -- npm publish --tag beta