# React

> One component, or one hook.

Source: https://docs.usejot.co/docs/install/react

<Callout title="Packages are on their way to npm">
  Until `@usejot/react` is published, the [script tag](/docs/install/script) in your `index.html`
  does the same job today.
</Callout>

```bash
npm install @usejot/react
```

```tsx title="src/main.tsx"
import { JotWidget } from "@usejot/react";

<App />
<JotWidget projectKey="jot_pk_your_key" />
```

`JotWidget` renders nothing. It loads the same script the plain tag does, and
removes the widget when it unmounts. StrictMode's double mount is safe — a
second mount is ignored.

Prefer a hook? `useJot(config)` does the same from inside any component.

## Options

Every [script option](/docs/install/script#options) is a prop: `trigger`,
`edge`, `offset`, `environment`, `autostart`.

```tsx
<JotWidget projectKey="jot_pk_your_key" environment="staging" edge="left" />
```

## Only on some deploys

Most teams want Jot on staging and preview deploys, not in front of every
customer. Render it behind whatever flag you already use:

```tsx
function Feedback({ show }: { show: boolean }) {
  return show ? <JotWidget projectKey="jot_pk_your_key" /> : null;
}
```

## Wait for consent

If your cookie banner must run first, hold the widget back and start it once
consent is granted:

```tsx
<JotWidget projectKey="jot_pk_your_key" autostart={false} />;

// later, when your consent tool says yes:
window.Jot?.init();
```