# React SDK

> Integrate Orshot Embed into your React applications

- **URL**: https://orshot.com/docs/orshot-embed/react-sdk

---

The React SDK provides a convenient wrapper component around the core Orshot Embed library, making it easy to integrate image generation capabilities into your React applications.

## Installation```bash
npm install @orshot/embed-react
# or
pnpm add @orshot/embed-react
# or
yarn add @orshot/embed-react
```## Usage

Import the `OrshotEmbed` component and render it in your application.```tsx
import { OrshotEmbed } from "@orshot/embed-react";
import { useRef } from "react";

function App() {
  const embedRef = useRef();

  return (
    <div style={{ height: "700px" }}>
      <OrshotEmbed
        ref={embedRef}
        embedId="YOUR_EMBED_ID"
        templateId="TEMPLATE_ID"
        modifications={{
          name: "John Doe",
          role: "Software Engineer",
        }}
        onTemplateCreate={(data) => console.log("Created:", data)}
        onError={(err) => console.error("Error:", err)}
      />
    </div>
  );
}
```## Props

The component accepts all standard configuration options plus event handlers:

| Prop            | Type                 | Description                             |
| :-------------- | :------------------- | :-------------------------------------- |
| `embedId`       | `string`             | Your Embed configuration ID.            |
| `templateId`    | `string` \| `number` | ID of the template to load initially.   |
| `modifications` | `object`             | Initial data to populate the template.  |
| `width`         | `string` \| `number` | Width of the iframe (default: `100%`).  |
| `height`        | `string` \| `number` | Height of the iframe (default: `100%`). |
| `className`     | `string`             | Class name for the container.           |
| `url`           | `string`             | Optional custom URL for self-hosting.   |

## Events

Event handlers follow the `on[EventName]` naming convention:

- `onTemplateCreate`
- `onTemplateUpdate`
- `onTemplateContent`
- `onDownloadPng`
- `onDownloadPdf`
- `onError`

See the [Events documentation](https://orshot.com/docs/orshot-embed/events) for payload details.

## Methods

By using a `ref`, you can access imperative methods to control the embed programmatically:```tsx
// Change template
embedRef.current.setTemplate("new-template-id");

// Update data
embedRef.current.setModifications({ title: "New Title" });

// Request export
embedRef.current.requestContent("png", { scale: 2 });
```## Source

[View on GitHub](https://github.com/rishimohan/orshot-embed-sdk/tree/main/packages/react)