@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

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