Usage with JSX Middlewares

It is possible to use react-clarify with JSX middlewares.

Firstly, you need to install jsx-middlewares:

npm

npm install jsx-middlewares

Yarn

yarn add jsx-middlewares

pnpm

pnpm add jsx-middlewares

Then, you need to set-up jsx-middlewares for your project. You can visit docs for how to setup your JSX transpiler. For most Typescript projects, this should work:

tsconfig.json

{
  "compilerOptions": {
    "jsxImportSource": "jsx-middlewares/react"
  }
}

Then, import react-clarify/middlewares once in your entry file.

main.ts

import 'react-clarify/middlewares';

Now, you can use react-clarify with JSX middlewares.

Example.jsx

<div $tracking={{ userId: '...', orgId: '...' }}>
  <button $trackEvent='click'>Click Me</button>
</div>

Available directives are:

• $tracking - Sets tracking context for all children.
• $trackEvent - Tracks the DOM event for the element.
• $trackCallback - Attaches a callback to the element, which triggers a tracking event when called.

For more information about JSX middlewares, please refer to jsx-middlewares docs.