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

# Yorlet React

> Embed a qualification form in React with the Yorlet React SDK.

`@yorlet/react` wraps [@yorlet/js](/development/libraries/yorletjs) so you can drop a qualification form into a React tree. The form still iframes the hosted page — you never put a secret key in the browser.

## Install

```bash theme={"theme":"dracula"}
npm install @yorlet/react @yorlet/js
```

```tsx theme={"theme":"dracula"}
import { QualificationForm, YorletProvider } from '@yorlet/react';
```

<Warning>
  Use a [publishable key](/development/api-keys) (`pk_…`) with the form token. Do not put a secret key or restricted key in the website. The publishable key only unlocks the hosted form for your account — it cannot create enquiries on its own.
</Warning>

## Embed a qualification form

Copy the form token from a [qualification configuration](https://dashboard.yorlet.com/leads/qualification-configurations) — it is shown in the **Form token** column and on the configuration's details page. It is not the configuration object id (`lqc_…`).

```tsx theme={"theme":"dracula"}
import { QualificationForm, YorletProvider } from '@yorlet/react';

export function Enquire() {
  return (
    <YorletProvider publishableKey="pk_...">
      <QualificationForm
        token="qct_..."
        email="jane@example.com"
        onReady={() => {
          console.log('Form is ready');
        }}
        onComplete={(event) => {
          if (event.redirectUrl) {
            window.location.assign(event.redirectUrl);
          }
        }}
      />
    </YorletProvider>
  );
}
```

Unmounting the component removes the iframe. You do not need to call `unmount()` yourself.

### `QualificationForm` props

| Prop             | Type     | Description                                                                                                         |
| ---------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
| `token`          | string   | Hosted form token. Must start with `qct_`                                                                           |
| `email`          | string   | Optional email passed through to the form                                                                           |
| `unit`           | string   | Optional unit id (`unit_…`) for the listing this form is on                                                         |
| `publishableKey` | string   | Account publishable key. Required when used without `YorletProvider`                                                |
| `origin`         | string   | Only needed when testing. Hosted-app origin. Overrides `YorletProvider` when both are set                           |
| `onReady`        | function | Called when the hosted form has painted                                                                             |
| `onResize`       | function | Called with the iframe height in pixels whenever the form resizes                                                   |
| `onComplete`     | function | Called when the lead submits. Receives `{ redirectUrl }` when the configuration is set to redirect after completion |

Any other props are passed through to the container `div`.

### `YorletProvider`

Wrap a tree of forms that share the same publishable key. The provider is optional if you pass `publishableKey` on `QualificationForm`.

```tsx theme={"theme":"dracula"}
<YorletProvider publishableKey="pk_...">
  <QualificationForm token="qct_..." />
</YorletProvider>
```

`useYorlet()` returns the client created by the nearest provider.

## Testing against a local hosted app

You do not need `origin` in production. `YorletProvider` and `QualificationForm` already load the form from the production hosted app. Pass `origin` only when you are testing against a local `frontend-app`:

```tsx theme={"theme":"dracula"}
<YorletProvider publishableKey="pk_test_..." origin="http://localhost:3000">
  <QualificationForm token="qct_..." />
</YorletProvider>
```

## What happens after submit

The lead's answers are stored on an enquiry in your pipeline. If the same person submits the same form again within seven days, Yorlet updates that enquiry instead of creating another. Pass `unit` on a listing page so the enquiry records that property. Further submits from the same person add more properties to the same enquiry. You do not need to call the Enquiries API from the page. If you want to send them somewhere else after they finish, handle `onComplete` — the iframe will not navigate the parent page itself.

For a full walkthrough, see [Embed a qualification form](/development/integrations/leads/embed-a-qualification-form).