To use our services with React, you can use our React hook which is available at @visitorquery/react.

npm install @visitorquery/react

Once the package installed, add the provider in your layout or page component:

import {VisitorQueryProvider} from "@visitorquery/react";
 
...
 
export default function Page() {
	const visitorParams = {
		apiKey   : process.env.NEXT_PUBLIC_VISITOR_QUERY_API_KEY,
		sessionId: getSetVisitorId(),
		endpoint : process.env.NEXT_PUBLIC_VISITOR_QUERY_ENDPOINT || undefined,
	};
 
	return (
		<VisitorQueryProvider {...visitorParams}>
            {children}
		</VisitorQueryProvider>
	);
}

Simply by adding the provider, visitorquery will perform a check.

​
How to create page views

Since navigation in modern SPAs is often done without a full page reload, adding pageviews can be tricky. Our provider uses useEffect internally and re-runs when the parameters change. In this case you can utilize the trigger param to trigger a pageview when your route changes like in the following NextJS example:

import {usePathname} from "next/navigation";

...

export default function Layout({children}) {
	const currPathname = usePathname();

	const visitorParams: VisitorQueryProviderProps = {
		apiKey   : process.env.NEXT_PUBLIC_VISITOR_QUERY_API_KEY as string,
		sessionId: getSetVisitorId(true),
		endpoint : process.env.NEXT_PUBLIC_VISITOR_QUERY_ENDPOINT as string || undefined,
	};

	const [pathname, setPathname] = React.useState(currPathname);

	useEffect(() => {
		if (pathname != currPathname) {
			setPathname(currPathname);
		}
	}, [currPathname]);

	return (
        // notice the `trigger` prop being passed
		<VisitorQueryProvider {...visitorParams} trigger={pathname}>
            {children}
        </VisitorQueryProvider>
	);
}

If you need details regarding the state of the check (started, ended, loading), in order to show/hide certain ui elements, use the provided hook:

import {useVisitorQuery} from "@visitorquery/react";
 
...
 
console.log(useVisitorQuery())

The main script will be loaded automatically into the page and the hook will take care of the rest. For a complete example and more information please refer to the hook’s npm page.