saashound-react
v0.0.2
Published
SaasHound client for react projects
Downloads
8
Maintainers
Readme
SaasHound React
Getting started
Install
yarn add saashound-react
Usage
SaasHound Provider
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>
)
useSaasHound Hook
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: "[email protected]",
role: "Chief Engineer",
}
});
}
return (
// Your component code here
)
}
Notes
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.