@stigg/react-sdk v5.14.0
@stigg/react-sdk
Stigg SDK for React single page applications (SPA).
Table of contents
Installation
Using npm
npm install @stigg/react-sdk
Using yarn
yarn add @stigg/react-sdk
Getting Started
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 options
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}
/>
4 days ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
10 months ago
8 months ago
10 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
5 months ago
8 months ago
10 months ago
6 months ago
8 months ago
10 months ago
10 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
8 months ago
7 months ago
8 months ago
8 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
6 months ago
8 months ago
8 months ago
8 months ago
9 months ago
10 months ago
10 months ago
9 months ago
9 months ago
8 months ago
7 months ago
8 months ago
9 months ago
9 months ago
10 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago