PhotoEditor SDK integration example for ReactJS

PhotoEditor SDK integration example for ReactJS

This repository contains an example for integrating PhotoEditor SDK into a ReactJS application. PhotoEditor SDK provides a ReactUI which exposes a React Component that can be easily used inside any ReactJS application.

Note

PhotoEditor SDK is a product of img.ly GmbH. In order to use PhotoEditor SDK inside one of your products, please request a license.

Let’s get started!

We will be using use 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 yout app.

Installing peer dependencies

PhotoEditor SDK needs following peer dependencies:

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

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

• Run npm install --save styled-components@^4.4 to include Styled Components in the project.

Installing PhotoEditor SDK

• Run npm install --save photoeditorsdk@latest.

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 id="editor" style={{ width: '100vw', height: '100vh' }} />)
  }
}

Download Details:

Author: imgly

Source Code: https://github.com/imgly/pesdk-react-demo

#react #reactjs #javascript