PESDK/Web/Introduction/Integrations

Getting Started - React JS

Getting started integration tutorial

Let's get started!#

Free Trial#

Our tech is modified to be used for testing purposes without a license key. To start testing just follow this Get Started guide and leave out the step of entering the commercial license keys. The editor will simply render a watermark over the preview and final results. And in case you need any technical assistance, make sure to reach out to us: https://img.ly/support. We’ll be glad to help.

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 Web fully supports all React versions between 16.8 and 17. It is also compatible with React 18 but it will force your application to behave like a React 17 application and you might not be able to use some newer React features.

PhotoEditor SDK needs following peer dependencies:

React >= 16.8.6
React DOM >= 16.8.6
Styled Components >= 4.4

React and React DOM are already installed 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.
Copy the assets folder from node_modules/photoeditorsdk to public.

Creating an Editor component#

JavaScript


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
      // Please replace this with your license: https://img.ly/dashboard
      license: '',
    });
    console.log("PhotoEditorSDK for Web is ready!");
    editor.on(UIEvent.EXPORT, (imageSrc) => {
      console.log("Exported ", imageSrc);
    });
  }

  render() {
    return (
      <div
        id="editor"
        style={{width: "100vw", height: "100vh" }};
      />
    );
  }
}

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.