Skip to main content

Usage with JSX Middlewares

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

Firstly, you need to install jsx-middlewares:

npm install 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.