> For the complete documentation index, see [llms.txt](https://doc.orbeon.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.orbeon.com/form-runner/link-embed/react-component.md).

# React component

## Availability

* \[SINCE Orbeon Forms 2022.1.6, 2023.1.1]
* This is an [Orbeon Forms PE](https://www.orbeon.com/download) feature.
* The React component is available from [the npm package registry](https://www.npmjs.com/package/@orbeon/react).

## Usage

The Orbeon Forms React component can be used in any React application. To use it, add `@orbeon/react` to your dependencies, typically in your `package.json` file, like this:

```json
{
  "dependencies": {
    "@orbeon/react": "^1.0.7"
  }
}
```

Usually, this is done via the command line:

```sh
npm install @orbeon/react
```

The Orbeon Forms React component is based on the [JavaScript embedding API](/form-runner/link-embed/javascript-api.md), but you don't need to include it explicitly using a `<script>` tag. The React component will include it automatically.

The component is used as follows:

```tsx
<FrForm app='acme' form='order' mode='new' orbeonContext='http://localhost:8080/orbeon'/>
```

The properties have the same meaning as in the [JavaScript embedding API](/form-runner/link-embed/javascript-api.md):

| Parameter     | Optional                             | Type                                                                | Example                          | Description                                             |
| ------------- | ------------------------------------ | ------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------- |
| orbeonContext | No                                   | String                                                              | `'http://localhost:8080/orbeon'` | Context where Orbeon Forms is deployed                  |
| app           | No                                   | String                                                              | `'human-resources'`              | App name                                                |
| form          | No                                   | String                                                              | `'job-application'`              | Form name                                               |
| mode          | No                                   | String                                                              | `'new'`                          | Either `'new'`, `'edit'`, or `'view'`                   |
| documentId    | Mandatory for modes other than `new` | String                                                              |                                  | For modes other than `'new'`, the document to be loaded |
| queryString   | Yes                                  | String                                                              | `"job=clerk"`                    | Additional query parameters                             |
| headers       | Yes                                  | [Headers](https://developer.mozilla.org/en-US/docs/Web/API/Headers) | `new Headers({ 'Foo': 'bar' })`  | Additional HTTP headers; see point 2 below              |

## Example

Here's a simple example in TypeScript where a form is selected from a dropdown and then embedded using the Orbeon Forms React component:

```tsx
import React from 'react';
import ReactDOM from 'react-dom';
import FrForm from '@orbeon/react';

interface MyComponentProps {
  selectedValue: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ selectedValue }) => {
  const [selectedOption, setSelectedOption] = React.useState(selectedValue);
  
  const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setSelectedOption(event.target.value);
  };

  return (
    <div>
      <select value={selectedOption} onChange={handleSelectChange}>
        <option value="Form 1">form-1</option>
        <option value="Form 2">form-2</option>
        <option value="Form 3">form-3</option>
      </select>
      <p>Form: {selectedOption}</p>
      <FrForm app='acme' form={selectedOption} mode='new' orbeonContext='http://localhost:8080/orbeon'/>
    </div>
  );
};

document.addEventListener('DOMContentLoaded', function() {
  ReactDOM.render(<MyComponent selectedValue='form-1'/>, document.getElementById('root'));
});
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://doc.orbeon.com/form-runner/link-embed/react-component.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.