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

# ReactJS

This is a thin wrapper on top of the Javascript Library, so you might want to view those docs first to familiarize yourself with the basic classes and methods.

# Installation

Install with a package manager

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    npm install @plandalf/plandalf-react-js
    ```
  </Tab>

  <Tab title="yarn">
    ```bash theme={null}
    yarn add @plandalf/plandalf-react-js
    ```
  </Tab>

  <Tab title="pnpm">
    ```bash theme={null}
    pnpm add @plandalf/plandalf-react-js
    ```
  </Tab>
</Tabs>

# Quick Usage

## Step 1: Import the PlandalfProvider and usePlandalf

```js theme={null}
import { PlandalfProvider } from "@plandalf/plandalf-react-js";


function App(props) {
  return (
    <PlandalfProvider agent={props.jwt_token}>
      <MyApplication />
    </PlandalfProvider>
  )
}
```

## Step 2:

Start using the `usePlandalf` hook to access the Plandalf API

```js theme={null}
import { usePlandalf } from "@plandalf/plandalf-react-js";

function MyApplication () {
  const plandalf = usePlandalf();

  if (plandalf.isWorkflowActive('my_workflow')) {
    return <MyOldPaywall/>
  }

  return (
    <MyComponent/>
  )
}
```