@poool/react-engage
v2.1.1
Published
The easiest way to add Poool Engage to your React app ✨
Downloads
859
Keywords
Readme
Poool Engage - React SDK
The easiest way to add Poool Engage to your React app ✨
Installation
yarn add @poool/react-engage
Usage
import { useRef } from 'react';
import { EngageContext, Element } from '@poool/react-engage';
export default = () => {
// Wrap everything with our EngageContext component
return (
<EngageContext appId="insert_your_app_id">
{ /*
Place your element where you want it to be displayed
*/ }
<Element slug="element_slug" />
</EngageContext>
);
};
Usage with auto create
import { useRef } from 'react';
import { EngageContext, Elements } from '@poool/react-engage';
export default = () => {
// Wrap everything with our EngageContext component
return (
<EngageContext appId="insert_your_app_id">
{ /*
Place the component anywhere inside the EngageContext
*/ }
<Elements />
</EngageContext>
);
};
Documentation
<EngageContext />
Props
appId
{String
} Your Poool App IDconfig
{Object
} (optional) Default elements config (see the configuration documentation)variables
{Object
} (optional) Elements variables used in texts (see the variables documentation)texts
{Object
} (optional) Elements custom texts (see the texts documentation)events
{Object
} (optional) Elements events listeners (see the events documentation)scriptUrl
{String
} (optional, default:'https://assets.poool.fr/engage.js'
) Default Poool Engage SDK urlscriptLoadTimeout
{Number
} (optional, default:2000
) Timeout for the script to load
<Element />
Props
slug
{String
} Element slug.tag
{String | React.ReactElement
} (optional, default:'div'
) Element container taguseGlobalFactory
{Boolean
} (optional, default:true
) Whether to use the factory from<EngageContext />
or notconfig
{Object
} (optional) Element config, overrides<EngageContext />
's one (see the configuration documentation)variables
{Object
} (optional) Element variables used in texts, overrides<EngageContext />
's ones (see the variables documentation)texts
{Object
} (optional) Element custom texts, overrides<EngageContext />
's ones (see the texts documentation)events
{Object
} (optional) Element events listeners, overrides<EngageContext />
's ones (see the events documentation)
<Elements />
Props
useGlobalFactory
{Boolean
} (optional, default:true
) Whether to use the factory from<EngageContext />
or notfilters
{Array<String>
} (optional) List of filters to apply to the elementsconfig
{Object
} (optional) Element config, overrides<EngageContext />
's ones (see the configuration documentation)variables
{Object
} (optional) Element variables used in texts, overrides<EngageContext />
's ones (see the variables documentation)texts
{Object
} (optional) Element custom texts, overrides<EngageContext />
's ones (see the texts documentation)events
{Object
} (optional) Element events listeners, overrides<EngageContext />
's ones (see the events documentation)
useEngage()
Can be used to retrieve some properties from the current Engage context, as well as the Engage SDK itself.
Returns
appId
{String
} Current app IDconfig
{Object
} Current Engage context configvariables
{Object
} Current Engage context variablestexts
{Object
} Current Engage context textsevents
{Object
} Current Engage context events listenersscriptUrl
{Object
} Engage SDK urllib
{Function
} The entire Engage SDKfactory
{Function
} Current Engage factorycreateFactory
{Function
} Creates a new factorycommitPageView
{Function
} Commits a page view (see the commitPageView documentation)
Example
const { appId, lib: engage } = useEngage();
Contributing
Please check the CONTRIBUTING.md doc for contribution guidelines.
Development
Install dependencies:
yarn install
Run examples at http://localhost:63001/ with webpack dev server:
yarn serve
And test your code:
yarn test
License
This software is licensed under MIT.
v1 -> v2 Migration
There shouldn't be any migration needed for this version.
v4 only drops support for Node 16 & yarn < 3.
The project was also migrated to TypeScript, but it shouldn't affect the way you use the library.