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}
/>
- 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
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.
- 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)
- Change
package.json
version to desired beta version in the format ofx.x.x-beta.x
- Make sure to do a clean build --
rm -rf dist & yarn build
- Publish to npm --
npm publish --tag beta