This package has been deprecated

Author message:

This package is for legacy Jitsu Classic version. For latest version of Jitsu please use @jitsu/jitsu-react

@jitsu/react

Official Jitsu SDK for React

Questions?

Join Jitsu Slack

Links

• Official SDK Docs

General

This package is a wrapper around @jitsu/sdk-js, with added functionality related to React.

Installation

To use Jitsu SDK, install npm package

npm install @jitsu/react

Import and configure Jitsu SDK Provider

//...
import { createClient, JitsuProvider } from "@jitsu/react";

// initialize Jitsu client
const jitsuClient = createClient({
  tracking_host: "__JITSU_HOST__",
  key: "__API_KET__",
  // See Jitsu SDK parameters section for more options
});

// wrap our app with Jitsu provider
ReactDOM.render(
  <React.StrictMode>
    <JitsuProvider client={jitsuClient}>
      <App />
    </JitsuProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

See parameters list for createClient() call.

Usage

import { useJitsu } from "@jitsu/react";

const App = () => {
  const {id, track, trackPageView} = useJitsu(); // import methods from useJitsu hook

  useEffect(() => {
    id({id: '__USER_ID__', email: '__USER_EMAIL__'}); // identify current user for all track events
    trackPageView() // send page_view event
  }, [])
  
  const onClick = (btnName: string) => {
    track('btn_click', {btn: btnName}); // send btn_click event with button name payload on click
  }
  
  return (
    <button onClick="() => onClick('test_btn')">Test button</button>
  )
}

To enable automatic pageview tracking, add usePageView() hook. This hook will send pageview each time user loads a new page (including internal SPA pages). This hook relies on React Router and requires react-router (>=5.x) package to be present

const App = () => {
  usePageView() //this hook will send pageview track event on router change

  return (
    <Routes>
      <Route path="/" element={<Main />} />
      <Route path="page" element={<Page />} />
    </Routes>
  );
}

If you need to pre-configure jitsu event - for example, identify a user, it's possible to do via before callback:

usePageView({before: (jitsu) => jitsu.id({id: '__USER_ID__', email: '__USER_EMAIL__'})})

Hooks

useJitsu

Returns object with id, track, trackPageView, rawTrack, set, unset and interceptAnalytics methods of Jitsu SDK.

usePageView

Can be used only with react-router. Sends pageview event on every route change.

Jitsu SDK parameters and methods

Read about all SDK parameters and methods in our documentation:

• Parameters - parameters reference for createClient() call
• Methods - all these methods can be called on a return value of useJitsu()

Example app

You can find example app here.