@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
Copy

Using yarn

yarn add @stigg/react-sdk
Copy

Getting Started

Import the styles:

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

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(
  
    
  ,
  document.getElementById('app'),
);
Copy

Paywall

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

 {
    // Handle customer intention to subscribe to plan
  }}
/>
Copy

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(...)
  })
}
Copy

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(
  
    
  ,
  document.getElementById('app'),
);
Copy

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',
    },
}

 {
        // Handle customer intention to subscribe to plan
    }}
    textOverrides={textOverrides}
/>

Copy

Development

Develop with storybook

1. Install dependencies using yarn:

yarn
Copy

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

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

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

yarn storybook
Copy

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:

1. Building storybook static files

yarn build-storybook
Copy

2. Uploading storybook files to Chromatic:

yarn publish-storybook
Copy

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

Link package

1. Run yarn link-sdk
2. 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"
Copy

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

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