Usage with JSX Middlewares
It is possible to use react-clarify
with JSX middlewares.
Firstly, you need to install jsx-middlewares
:
- npm
- Yarn
- pnpm
npm install jsx-middlewares
yarn add jsx-middlewares
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.