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.
PhotoEditor SDK is a product of img.ly GmbH. In order to use PhotoEditor SDK inside one of your products, please request a license.
We will be using use create-react-app for simplicity.
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)
http://localhost:3000/
to see yout app.PhotoEditor SDK needs following peer dependencies:
React and React DOM are already insalled using Create React App.
npm install --save styled-components@^4.4
to include Styled Components in the project.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.
assets
: It contains all assets required for the PhotoEditor, this includes for example assets for frames, stickers and the ui.cjs
: It contains PhotoEditor SDK UI bundled as commonjs modules, will be loaded for older browser versions.esm
: It contains PhotoEditor SDK UI bundled as ECMAScript modules, will be loaded for supported modern browser versions.assets
from node_modules/photoeditorsdk
to public
.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' }} />)
}
}
Author: imgly
Source Code: https://github.com/imgly/pesdk-react-demo
#react #reactjs #javascript