@poool/react-access
v4.0.0
Published
The easiest way to add Poool Access to your React app ✨
Downloads
553
Keywords
Readme
Poool Access - React SDK
The easiest way to add Poool Access to your React app ✨
ℹ️ You're looking at the documentation for the v2+ of React Access. If you're looking for v1, please see the v1 docs.
Installation
yarn add @poool/react-access
Usage
import { useRef } from 'react';
import {
AccessContext,
RestrictedContent,
Paywall,
Pixel,
} from '@poool/react-access';
export default = () => {
const contentRef = useRef();
return (
<>
{ /*
Wrap everything with our AccessContext component. Note the withAudit
prop which saves you from writing AuditContext inside of
AccessContext
*/ }
<AccessContext
appId="insert_your_app_id"
config={{ cookies_enabled: true }}
withAudit={true}
>
{ /* Wrap your content with our RestrictedContent component */ }
<RestrictedContent ref={contentRef}>
<div className="articleBody">
<p>Your article content</p>
</div>
</RestrictedContent>
{ /*
Place our <Paywall /> component where you want your paywall to be
displayed
*/ }
<Paywall contentRef={contentRef} />
{ /*
Place our <Pixel /> component anywhere inside an <AuditContext />
component (or <AccessContext withAudit={true} />) to track page-view
events (used for native segmentation)
*/ }
<Pixel type="page-view" data={{ type: 'premium' }} />
</AccessContext>
</>
);
};
Usage with AuditContext
import { useRef } from 'react';
import {
AccessContext,
AuditContext,
Paywall,
RestrictedContent,
Pixel,
} from '@poool/react-access';
export default () => {
const contentRef = useRef();
return (
<AuditContext appId="insert_your_app_id">
<AccessContext appId="insert_your_app_id">
<RestrictedContent ref={contentRef}>
<div className="articleBody">
<p>Your article content</p>
</div>
</RestrictedContent>
<Paywall contentRef={contentRef} />
<Pixel type="conversion" />
</AccessContext>
</AuditContext>
);
};
Documentation
<AccessContext />
Props
appId
{String
} Your Poool App IDconfig
{Object
} (optional) Default paywall config (see the configuration documentation).styles
{Object
} (optional) Default paywall styles (see the styles documentation).texts
{Object
} (optional) Default paywall texts (see the texts documentation).events
{Object
} (optional) Paywall events listeners (see the events documentation).variables
{Object
} (optional) Paywall variables (see the variables documentation).scriptUrl
{String
} (optional, default:'https://assets.poool.fr/access.min.js'
) Default Poool Access SDK urlscriptLoadTimeout
{Number
} (optional, default:2000
) Timeout for the script to loadwithAudit
{Boolean
} (optional, default:false
) Whether to include AuditContext in AccessContext or not
<AuditContext />
Props
appId
{String
} Your Poool App IDconfig
{Object
} (optional) Default audit config (see the configuration documentation).events
{Object
} (optional) Audit events listeners (see the events documentation).scriptUrl
{String
} (optional, default:'https://assets.poool.fr/audit.min.js'
) Default Poool Audit SDK urlscriptLoadTimeout
{Number
} (optional, default:2000
) Timeout for the script to load
<RestrictedContent />
Props
mode
{String
:'excerpt'
|'hide'
|'custom'
} (optional) Way to hide content see Access configuration for more informations.percent
{Number
} (optional) Percentage of content to hide.
<Paywall />
Props
contentRef
{React.Ref
} Reference to the RestrictedContent component associated to this Paywallid
{String
} (optional, default: random id) Custom wrapper component IDpageType
{String
} (optional, default:'premium'
) Current page type (supported types:page
,premium
,free
,subscription
)config
{Object
} (optional) Paywall config (see the configuration documentation).styles
{Object
} (optional) Paywall styles (see the styles documentation).texts
{Object
} (optional) Paywall texts (see the texts documentation).variables
{Object
} (optional) Paywall variables (see the variables documentation).events
{Object
} (optional) Paywall events listeners (see the events documentation)
<Pixel />
Props
type
{String
} Event type (supported types:page-view
)data
{Object
} (optional but mandatory when type is page-view) Data associated to the event (see the audit documentation)config
{Object
} (optional) Pixel config (see the configuration documentation).options
{Object
} (optional) Options to pass to the event (see the audit documentation)onDone
{Function
} (optional) Callback to execute when the event is donereuse
{Boolean
} (optional, default:false
) Whether to reuse the same event or not
useAccess()
Can be used to retrieve some properties from the current access context, as well as the Access SDK itself.
Returns
lib
{Function
} The entire Access sdkappId
{String
} Current app IDconfig
{Object
} Current access context configtexts
{Object
} Current context textsstyles
{Object
} Current context stylesvariables
{Object
} Current context variablesevents
{Object
} Current access context events listenersscriptURL
{Object
} Access SDK url
Example
const { appId, lib: access } = useAccess();
useAudit()
Can be used to retrieve some properties from the current audit context, as well as the Audit SDK itself.
Returns
lib
{Function
} The entire Audit sdkappId
{String
} Current app IDconfig
{Object
} Current audit context configevents
{Object
} Current audit context events listenersscriptURL
{Function
} Audit SDK url
Example
const { appId, lib: audit } = useAudit();
Contributing
Please check the CONTRIBUTING.md doc for contribution guidelines.
Development
Install dependencies:
yarn install
Run examples at http://localhost:63000/ with webpack dev server:
yarn serve
And test your code:
yarn test
License
This software is licensed under MIT.
v2 -> v3 Migration
There shouldn't be any migration needed for this version.
v3 only drops support for Node 14 & yarn, so unless you want to contribute to this repo using Node 14 or Yarn, you don't have to do anything.
It also drops support for Internet Explorer, but as Access.js already dropped support for IE in 2019, this release only removes some useless IE polyfills.
v1 -> v2 Migration
<PaywallContext />
has been replaced with<AccessContext />
(used to show the paywall) and<AuditContext />
(used to track particular events)usePoool
has been replaced withuseAccess
anduseAudit
, both respectively requiring the above contexts to be a parent component<Paywall />
now needs acontentRef
prop to be able to lock/unlock the content, and the ref should be retrieved from<RestrictedContent />
<Pixel />
has been added to avoid manual event tracking using the legacypoool()
function
Basic example in v1:
import {
PaywallContext,
RestrictedContent,
Paywall,
usePoool,
} from '@poool/react-access';
export default () => {
const { poool } = usePoool();
useEffect(() => {
poool('config', 'context', 'sports');
poool('send', 'page-view', 'premium');
}, []);
return (
<PaywallContext appId="test" config={{ cookies_enabled: true }}>
<RestrictedContent><div>test</div></RestrictedContent>
<Paywall />
</PaywallContext>
);
};
To be transformed in v2:
import { useRef } from 'react';
import {
AccessContext,
RestrictedContent,
Paywall,
Pixel,
} from '@poool/react-access';
export default () => {
const contentRef = useRef();
return (
<AccessContext
appId="test"
config={{ cookies_enabled: true }}
withAudit={true}
>
<RestrictedContent ref={contentRef}><div>test</div></RestrictedContent>
<Paywall config={{ context: 'sports' }} contentRef={contentRef} />
<Pixel type="page-view" data={{ type: 'premium' }} />
</AccessContext>
);
};