@vyro-x/react-insights-client
v0.31.0
Published
Insights client for React
Downloads
644
Keywords
Readme
@vyro-x/react-insights-client
Client-side insights system integration for React & Next.js
Usage
Install
npm i @vyro-x/react-insights-client
or
pnpm i @vyro-x/react-insights-client
InsightsProvider
Wrap your app with the InsightsProvider
import { InsightsProvider, CollectorApi } from '@vyro-x/react-insights-client';
import { authService } from '@vyro-x/react-auth';
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { App } from './App';
const container = document.getElementById('root');
if (!container) throw new Error('Failed to find the root element');
const root = ReactDOM.createRoot(container);
const collectorApi = new CollectorApi({
endpoint: process.env.REACT_APP_COLLECTOR_API_URL,
getAccessToken: authService.tokens.getAccessToken,
});
root.render(
<React.StrictMode>
<InsightsProvider collectorApi={collectorApi}>
<App />
</InsightsProvider>
</React.StrictMode>,
);
Track
Track events using the useInsights hook.
import { useInsights, EventInput } from '@vyro-x/react-insights-client';
export default function Page() {
const { trackEvent } = useInsights();
return (
<button
onClick={() =>
trackEvent({
type: EventInput.type.CLICK,
// ...
})
}
>
My button
</button>
);
}
Config
The collector-api is deployed to the following URLs:
REACT_APP_COLLECTOR_API_URL=http://127.0.0.1:3020
For the dev env these are:
REACT_APP_COLLECTOR_API_URL=https://collector-api.vyrolabs.net
And in production they are:
REACT_APP_COLLECTOR_API_URL=https://collector-api.vyro.com.au