A plugin for the popular React framework.

Usage no npm install needed!

<script type="module">
  import logaryPluginReact from 'https://cdn.skypack.dev/@logary/plugin-react';


Logary JS — React Plugin

A plugin for the popular React framework.

npm add @logary/plugin-react


For details, see ./examples/with-nextjs in the repository.

In your logary.ts:

import react from '@logary/plugin-react'
const logary = getLogary({ ... }) // configure targets and Logary Analytics ID here
// more plugins here
export default logary

You can now use the useLogary hook to get the Logary instance:

import '../lib/logary' // ensure Logary is instantiated (best placed in App.tsx)

// now you can use the hooks in your components:
import { useLogary, useLogger } from '@logary/plugin-react'

export default function Button({ onClick, children }) {
  const { event } = useLogger('MyApp', 'Button')

  function handleClick(e: Event) {
    event('Made purchase', { amount: 20.3, currency: 'USD' })

  return (
    <button onClick={handleClick}>