Migration Guide

This is a reference for upgrading your site from PhotoEditor SDK v4 to v5. While there's a lot covered here, you probably won't need to do everything for your site. We'll do our best to keep things easy to follow, and as sequential as possible so you can quickly get rocking on v5!

We will be supporting two UIs as before, but we are now moving away from the terminology DesktopUI and ReactUI, instead now they are called AdvancedUI and BasicUI. Refer to the UIs documentation for more information.

Update dependencies#

You need to update your package.json file in order to use the latest version of phototeditorsdk.

  "dependencies": {
-    "photoeditorsdk": "^4.20.0"
+    "photoeditorsdk": "^5.8.0"
  }

Update the React and React DOM Version. It was increased from ^15.0.0 to ^16.13.1. This allows us to rely on the Context API. It also needs to have a new peer dependency styled-components.0

  "dependencies": {
-    "react": "^15.0.0"
-    "react-dom": "^15.0.0"
+    "react": "^16.13.1"
+    "react-dom": "^16.13.1"
+    "styled-components": "^4.4.0"
  }

Handling breaking changes#

Updating imports#

- import PhotoEditorUI from 'photoeditorsdk/desktop-ui'
- import Styles from 'photoeditorsdk/css/PhotoEditorSDK.UI.DesktopUI.css'
+ import { PhotoEditorSDKUI } from 'photoeditorsdk'

If you are directly rendering a React component

- import PhotoEditorUI from 'photoeditorsdk/desktop-ui'
+ import { PhotoEditorSDKUIComponent } from 'photoeditorsdk'

Updating configuration#

While we tried to minimize the number of breaking changes and make it backward compatible as much as possible, we believe that some breaking changes in the configuration were required.

- const editor = new PhotoEditorUI(config)
+ const editor = await PhotoEditorSDKUI.init(config)

If you are directly rendering the React component

- <PhotoEditorUI.ReactComponent {...config} />
+ <PhotoEditorSDKUIComponent {...config} />

Although the mapper maps your old configuration to the new one, we highly recommend you to go and check the configuration documentation. There are now a lot of new configurations and customizations available.

Handling events#

Renaming UI events. Some of the previously supported events are now deprecated. Refer to the events documentation for more information.

+  import { UIEvent } from 'photoeditorsdk'
-  editor.on(PhotoEditorUI.Events.EDITOR_READY, () => {
+  editor.on(UIEvent.EDITOR_READY, () => {

If you are directly rendering the React component, handling of the event is done in the similar way.

+  import { UIEvent } from 'photoeditorsdk'
public componentDidMount() {
  const ui = this.pesdk.current.ui
-  ui.on(PhotoEditorUI.Events.EDITOR_READY, () => {
+  ui.on(UIEvent.EDITOR_READY, () => {
}

Canvas Renderer#

Hitherto we supported two rendering engines for PhotoEditor SDK UI i.e., WebGL and Canvas. Considering browser support we will here-forth be supporting only WebGL.