@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

Publish storybook

When doing changes, it can be useful to let others play with it without publising the changes to npm. In order to do that we are uploading the storybook files to Chromatic:

• Building storybook static files

yarn build-storybook

• Uploading storybook files to Chromatic:

yarn publish-storybook

NOTE: The STORYBOOK_STIGG_BASE_URI environment parameter in .env.local file controlling the API url that storybook is going to use.

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