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

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.

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 for payload details.

Methods

By using a ref, you can access imperative methods to control the embed programmatically:

// 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