Docs
API Docs

Getting Started - React JS

Let’s get started!

We will be using create-react-app for simplicity.

Create a project
  • Start a new project with create-react-app

npx create-react-app my-app
cd my-app
npm run start

Note: (npx comes with npm 5.2+ and higher, see instructions for older npm versions)

  • Then open http://localhost:3000/ to see your app.
Installing peer dependencies

PhotoEditor SDK needs following peer dependencies:

  1. React >= 16.8.6
  2. React DOM >= 16.8.6
  3. Styled Components >= 4.4

React and React DOM are already insalled using Create React App.

  • Run npm install --save styled-components to include Styled Components in the project.
Installing PhotoEditor SDK
  • Run npm install --save photoeditorsdk.

You will be left with following structure in your node_modules/photoeditorsdk/

├── assets
│   ├── adjustment
│   ├── colorpicker
│   ├── controls
│   ├── filter
│   ├── focus
│   ├── font
│   ├── frame
│   ├── overlay
│   ├── sticker
│   ├── textdesign
│   └── transform
├── esm
└── cjs

The package contains three folders that you need to integrate to your project.

  1. assets: It contains all assets required for the PhotoEditor, this includes for example assets for frames, stickers and the ui.
  2. cjs: It contains PhotoEditor SDK UI bundled as commonjs modules, will be loaded for older browser versions.
  3. esm: It contains PhotoEditor SDK UI bundled as ECMAScript modules, will be loaded for supported modern browser versions.
  • Copy the assets from node_modules/photoeditorsdk to public.
Creating an Editor component
import { UIEvent, PhotoEditorSDKUI } from "photoeditorsdk";

export class PhotoEditorSDK extends React.Component {
  componentDidMount() {
    this.initEditor();
  }
  async initEditor() {
    const editor = await PhotoEditorSDKUI.init({
      container: "#editor",
      image: "../example.jpg", // Image url or Image path relative to assets folder
      license: "",
    });
    console.log("PhotoEditorSDK for Web is ready!");
    editor.on(UIEvent.EXPORT, (imageSrc) => {
      console.log("Exported ", imageSrc);
    });
  }

  render() {
    return (
      <div
        role="PhotoEditor SDK"
        id="editor"
        style=
      />
    );
  }
}

CORS

If you are loading images from external sources (e.g. from an AWS bucket), you need to first configure Cross-Origin Resource Sharing for both the server and the image.

Otherwise, you will see errors such as
Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at [...] may not be loaded.
or
Unable to get image data from canvas because the canvas has been tainted.

Please follow the instructions on how to properly configure CORS here.

Ready to go!

There you have it. PhotoEditor SDK for the Web is ready to use. Refer to the configuration documentaion for more configuration options.