# Installation

[![npm version](https://img.shields.io/npm/v/@foresightjs/react.svg)](https://www.npmjs.com/package/@foresightjs/react) [![npm downloads](https://img.shields.io/npm/dt/@foresightjs/react.svg)](https://www.npmjs.com/package/@foresightjs/react)

`@foresightjs/react` is the official React package for ForesightJS. It gives you [`useForesight`](/docs/react/useForesight.md), the [`Foresight` component](/docs/react/foresight-component.md) and [`useForesightEvent`](/docs/react/useForesightEvent.md) so you can register elements and read their prediction state straight from a component.

```
npm install @foresightjs/react
# or
pnpm add @foresightjs/react
# or
yarn add @foresightjs/react
```

```
import { useForesight, ForesightManager } from "@foresightjs/react"
```

## Configuring the manager[​](#configuring-the-manager "Direct link to Configuring the manager")

You don't have to configure anything. The manager auto-initializes with sensible defaults the first time you register an element.

If you do want to tweak global behaviour, call `ForesightManager.initialize()` once at your app entry point. See [Initialize the Manager](/docs/react/initialize-the-manager.md) and [Global Settings](/docs/react/configuration/global-settings.md).

## Devtools[​](#devtools "Direct link to Devtools")

The visual [Development Tools](/docs/react/devtools.md) live in their own package (`js.foresight-devtools`) and work the same regardless of framework.