> ## Documentation Index
> Fetch the complete documentation index at: https://docs.visitorquery.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React

> React framework integration for VisitorQuery

To use our services with React, you can use our React hook which is available at [@visitorquery/react](https://www.npmjs.com/package/@visitorquery/react).

`npm install @visitorquery/react`

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

```tsx theme={null}
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:

```tsx theme={null}
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:

```tsx theme={null}
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.