React provider for the Quotient SDK client.
npm install @quotientjs/reactReact provider for the Quotient SDK client.
``bash`
npm install @quotientjs/reactor
yarn add @quotientjs/reactor
pnpm add @quotientjs/react
Wrap your application with the QuotientProvider:
`tsx
import { QuotientProvider } from "@quotientjs/react";
function App() {
return (
apiKey: "your_api_key",
baseUrl: "https://api.quotient.com",
}}
// Automatically track page views on initial load and route changes
autoTrackPageViews={true}
>
);
}
`
Access the Quotient client with the useQuotient hook:
`tsx
import { useQuotient } from "@quotientjs/react";
function YourComponent() {
// Get the client context - includes all needed functionality
const { client, isInitializing, error, reset, trackPageView } = useQuotient();
// Example: manually track page view
const handleTrackPageView = () => {
trackPageView();
};
// Example: track a person
const handleSubmit = async (email) => {
if (client) {
await client.people.upsert({
emailAddress: email,
emailMarketingState: "SUBSCRIBED",
});
}
};
return (
Initializing client...
Error: {error.message}
Client ready!
$3
When
is enabled, the provider will:1. Track a page view when the component mounts
2. Track page views when the pathname changes (works with history API)
3. Works with most modern React routers like React Router
This is ideal for Single Page Applications where you want analytics for each virtual page.
$3
For components that only need to know the client status:
`tsx
import { useQuotientStatus } from "@quotientjs/react";function ClientStatus() {
// Get just the client status without the client itself
const { isInitializing, error } = useQuotientStatus();
return (
{isInitializing
? "Initializing..."
: error
? Error: ${error.message}
: "Ready"}
);
}
`Manual Initialization
If you need to initialize the client manually:
tsx
import { QuotientProvider, useQuotient } from "@quotientjs/react";function App() {
return (
apiKey: "your_api_key",
baseUrl: "https://api.quotient.com",
}}
autoInitialize={false}
>
);
}
function InitializeButton() {
const { initialize, isInitializing, client } = useQuotient();
return (
{client ? (
Client initialized!
) : (
)}
);
}
``MIT