impression-tracker-react-hook

This library is used to track impressions using a react useImpressionTracker hook.

See unit tests for a detailed example for both the React Hook and Higher Order Component (HOC).

Hook

import{useImpressionTracker}from'impression-tracker-react-hook';import{createEventLogger}from'promoted-snowplow-logger';exportconsthandleError=process.env.NODE_ENV!=='production' ? (err)=>{throwerr;} : console.error;exportconsteventLogger=createEventLogger({enabled: true,
handleError,});constHookedExampleComponent=({// Set insertionId and/or contentId.
insertionId,
contentId,}: Props)=>{// ref needs to be set on the div to observe.// impressionId can be passed directly into a logAction call.// logImpressionFunctor can be called to force an impression.const[ref,impressionId,logImpressionFunctor]=useImpressionTracker({enable: true,
insertionId,
contentId,
handleError,logImpression: eventLogger.logImpression,});return<divref={ref}>{text}</div>;};

Higher-Order Components (HOC)

interfaceProps{
...
// TODO - set this ref on the div.impressionRef: (node?: Element|null)=>void;// Optional props.impressionId: string;// In case you want to log an impression early.logImpressionFunctor: ()=>void;}classExampleComponentextendsReact.Component<Props>{
...
render(){
...
return<divref={this.props.impressionRef}>{text}</div>;}}constWrappedExampleComponent=withImpressionTracker(ExampleComponent,{
handleError,isEnabled: ()=>impressionLoggingEnabled,getContentId: props=>props.contentId,getInsertionId: props=>props.insertionId,// Can be changed to modify the impression.logImpression: eventLogger.logImpression,});

Using Compose

constWrappedExampleComponent=compose(
...,composableImpressionTracker({
handleError,isEnabled: ()=>impressionLoggingEnabled,getContentId: props=>props.contentId,getInsertionId: props=>props.insertionId,// Can be changed to modify the impression.logImpression: eventLogger.logImpression,}))(ExampleComponent);

Features

Uses

• TypeScript support
• React support
• CSS Modules with PostCSS
• ESLint (with React and Prettier)
• Unit tests (Jest and Testing Library)
• Minified output with Terser
• Bundle size validation with size-limit
• Flexible builds with Rollup
• CHANGELOG.md template

Scripts

• Run most commands: npm run finish
• Build the project: npm run build
  • Validate output bundle size with npm run size
• Lint the project: npm run lint
• Run unit tests: npm test or npm test

When developing locally

Broken - We previously had an npm run updateLink command to use npm link for local development. This fails with a Error: Cannot find module 'react'.

For now, just copy/paste the impression tracker code into the client code and test it out.

Deploy

We use a GitHub action that runs semantic-release to determine how to update versions. Just do a normal code review and this should work. Depending on the message prefixes (e.g. feat: , fix: , clean: , docs: ), it'll update the version appropriately.

When doing a breaking change, add BREAKING CHANGE: to the PR. The colon is important.

Resources

The base of this repository is a combination of the following repos:

• https://github.com/DenysVuika/react-lib
• https://github.com/Alexandrshy/como-north and https://dev.to/alexandrshy/creating-a-template-repository-in-github-1d05