This post is part from series of posts related to integrating Pixo into most popular frameworks. You may check also:
You can check the example and the source code here.
Create new React app
We start with creating a boilerplate app. We need Create-React-App-CLI for that purpose, so make sure to install it if you don’t already have it:
npm install -g create-react-app
Then create the new application:
create-react-app react-pixo
This creates the required files structure, dependencies and tooling – everything you need to start developing your business logic.
Start the app
npm start
This will start Webpack dev server on localhost:3000 where you can see the welcome screen.
The browser will automatically reload every time you save a file.
Integrate Pixo
Now let’s get the real work done.
Add Pixo.Bridge dependency
Open in your editor public/index.html and add <script src="https://pixoeditor.com/editor/scripts/bridge.m.js"></script> somewhere between the <head></head> tags.
This will add Pixo.Bridge to your global object (window). The Bridge class is required in order to create a “bridge” between your app and Pixo Service.
Create Pixo Bridge
Next step is to create new instance of Pixo.Bridge in your app component.
Create a new file src/image.js and add the following code:
import React from 'react';
const { Pixo } = window;
export const PixoImage = ({ src, onChange }) => {
const pixo = new Pixo.Bridge({
type: 'modal',
apikey: 'xxxxxxxxxxxx', // put your API key here!
onSave: img => onChange(img.toDataURL()),
});
return <img src={src} onClick={() => pixo.edit(src)} />;
}
Now let’s see what’s happening:
- We need to import
Reactin order for the transpiled code to work properly Pixois a global object (also property of thewindowobject) created in the previous step; we need it in order to instantiate theBridge- We export new reusable React component that will render an image and also integrates Pixo as editor; it expects 2 props:
srcSource URL of the imageonChangecallback function that will receive the URL of the edited image, exported by Pixo
- The above component renders an image with the given URL and also adds
onClickhandler that opens the image for editing in Pixo Editor
Don’t forget to replace the dummy string with your real API key.
Use the new component in our app
Finally we need to update our app component to use our freshly created Pixo component for displaying images and adding editign functionality to them.
Open src/index.js and replace the existing content with the following:
import React, { useState } from 'react';
import { render } from 'react-dom';
import { PixoImage } from './image';
const App = () => {
const [src, onChange] = useState('https://via.placeholder.com/350x150');
return (
<>
<h1>Click image to edit</h1>
<PixoImage src={src} onChange={onChange} />
</>
);
};
render(<App />, document.getElementById('root'));
Check the browser and voila! The image is shown, and click on it loads Pixo! Now let’s break down what’s happening above:
- Our
Appis a functional component using theuseStateReact hook - We keep the image
srcurl in the app state and provide it to thePixoImagecomponent - We also provide the
onChangecallback to the component, so when Pixo exports the saved images oursrcgets updated
That’s it! Simple as pie!
Source code and demo
Integration of Pixo in React app
You can extend & configure Pixo with anything you want, just make sure that you read our documentation.
This post is part from series of posts related to integrating Pixo into most popular frameworks. You may check also:
Souhardya Das Chowdhury says on December 29, 2020 at 7:36 am
I am trying to integrate pixo with my website.However,pixo editor is not exporting the edited image.Plz help.
Pixo Team says on December 29, 2020 at 9:27 am
Hello,
Please use the contact form in the website, or the chat button at the bottom right corner. We will assist you.