yarn add saashound-react
First, wrap your application with the SaasHoundProvider at the top level of your application, similar to other context providers. The provider requires token and project props.
import React from 'react'
import { SaasHoundProvider } from 'saashound-react'
const App: React.FC = () => (
<SaasHoundProvider token="API_TOKEN" project="PROJECT_NAME">
{/* Rest Of Appplication */}
</SaasHoundProvider>
)
The useSaasHound hook can be used across your React components and provides the following methods:
track(options: LogEventParams): Track custom events.
identify(options: IdentifyParams): Identify user traits.
setUserId(userId?: string | null): Set the user id for the current user. If the user is not logged in, pass null, undefined or an empty string.
clearUserId(): Clear the user id for the current user, usually when logging out.
import React from 'react'
import { useSaasHound } from 'saashound-react'
const YourComponent: React.FC = () => {
const { logEvent, sendMetric, identify, setUserId } = useSaasHound()
const yourFunction = async () => {
await setUserId('naomi-nagata');
await logEvent( {
channel: "navigation",
title: "Docking Successful",
userId: "naomi-nagata",
icon: "🛳️",
notify: true,
description: "Successful docking at Tycho Station.",
tags: {
dock: "Bay 7",
status: "secured",
crewCount: 11
}
});
await sendMetric({
title: "Fuel Reserves",
value: 45,
icon: "⛽",
increment: false
});
await identify({
userId: "naomi-nagata",
properties: {
name: "Naomi Nagata",
email: "naomi@roci.com",
role: "Chief Engineer",
}
});
}
return (
// Your component code here
)
}
The useSaasHound hook must be used within a component that is a child of the SaasHoundProvider component. If you attempt to use it outside of this context, an error will be thrown.