# React

## Setup

Start with adding dependency to your project: `npm install @jitsu/jitsu-react`. Then add `<JitsuProvider/>` component
close to the root level of your app:

:::tip
In all examples below, replace `your-jitsu-domain.com` with your Jitsu installation domain.

Jitsu Cloud users may find domain in the top-right corner of Site's **Setup Instruction** page or
attach custom domain for a specific Site and use it instead.
:::

```jsx
import React, {Component} from 'react'
import {JitsuProvider} from "@jitsu/jitsu-react";

function App() {
    return (
        <JitsuProvider options={{host: "https://your-jitsu-domain.com"}}>
            <ChildComponent/>
        </JitsuProvider>
    );
}
```

## Options

| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | Description                                                                                                                                                                                                         |
|------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `host`                                                                                                                                               | Host Jitsu installation domain. Jitsu Cloud use instruction in UI to obtain domain.                                                                                                                                 |
| `writeKey`                                                                                                                                           | Browser Write Key configured on Jitsu Site entity. If no Browser Write Key is added for Site entity, Site ID value can be used a Write Key. On Jitsu.Cloud can be omitted if Site has explicitly mapped domain name. |

## Manual event tracking

Call `useJitsu` hook whenever you need manually trigger events object:

```jsx
import { useJitsu } from "@jitsu/jitsu-react";

function ChildComponent() {
  const { analytics } = useJitsu();
  return <button onClick={() => analytics.track("click")}>Click Me!</button>;
}
```

`analytics` implements standard [Analytics.js](https://getanalytics.io/api/) interface. See a full list of methods in [JavaScript Reference](/docs/sending-data/js-reference) section


## Automatic `page` event tracking

Jitsu can automatically track `page` events when user navigates to a new page:

### With react-router:

```jsx
import {useJitsu} from "@jitsu/jitsu-react"
import {useLocation} from "react-router-dom"

function ChildComponent() {
    const {analytics} = useJitsu()
    const location = useLocation()
    useEffect(() => {
        analytics.page()
    }, [location])
    return <></>

}
```

### With Next.js:

```jsx
import {useJitsu} from "@jitsu/jitsu-react"
import {useRouter} from "next/router"

function ChildComponent() {
    const {analytics} = useJitsu()
    const router = useRouter()
    useEffect(() => {
        analytics.page()
    }, [router.asPath])
    return <></>
}
```