react-sdk-embed

React components for embedding SDKs in an iframe:

• SDKEmbed — generic wrapper div + iframe (pass iframe attributes via iframeProps).
• PicsartEmbed — loads Picsart cdn.js and mounts their editor (see Picsart docs for API keys and local create server).

Peer dependencies: React 18+ and react-dom.

Install

From the npm registry (after you publish), or from a tarball / git:

npm install react-sdk-embed
# or
npm install /path/to/react-sdk-embed-0.1.0.tgz

In the consuming app you must already have react and react-dom installed.

Build & pack this repo

npm install
npm run build
npm pack

This produces react-sdk-embed-0.1.0.tgz containing dist/ (ESM, CJS, TypeScript types).

Local development link:

cd /path/to/react-sdk-embed && npm link
cd /path/to/consumer-app && npm link react-sdk-embed

Use in another React app

import { SDKEmbed, PicsartEmbed, pickPicsartInitialOpenOptions } from "react-sdk-embed";

function App() {
  return (
    <>
      <SDKEmbed
        className="my-shell"
        iframeProps={{
          src: "https://example.com/embed",
          title: "Embed",
          style: { width: "100%", height: 480, border: 0 },
        }}
      />

      <PicsartEmbed
        picsartSettings={{ apiKey: "YOUR_API_KEY" /* + other Picsart options */ }}
        openOptions={pickPicsartInitialOpenOptions({ /* same object as picsartSettings */ })}
      />
    </>
  );
}

Next.js (App Router): components ship with "use client"; import them from Client Components only.

Publish

1. Change "name" in package.json if the name is taken (consider a scoped name: @your-org/react-sdk-embed).
2. npm publish (or npm publish --access public for a scoped public package).

Before publishing, run npm run pack:check to confirm the tarball contents.