Stigg SDK for React single page applications (SPA).
Using npm
npm install @stigg/react-sdk
Using yarn
yarn add @stigg/react-sdk
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'),
);
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
}}
/>
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(...)
})
}
The components included in of this package comes with default styling, and you can customize and change the appearance:
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'),
);
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}
/>
yarn
.env.local
file and add the following environment variables:BASE_URI='http://localhost:4000'
API_KEY='<your-api-key>'
http://localhost:6006
yarn 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:
yarn build-storybook
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.
yarn link-sdk
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)
package.json
version to desired beta version in the format of x.x.x-beta.x
rm -rf dist & yarn build
npm publish --tag beta