loading

Tutorial: Integrate Pixo in React app

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:

  1. We need to import React in order for the transpiled code to work properly
  2. Pixo is a global object (also property of the window object) created in the previous step; we need it in order to instantiate the Bridge
  3.  We export new reusable React component that will render an image and also integrates Pixo as editor; it expects 2 props:
    • src Source URL of the image
    • onChange callback function that will receive the URL of the edited image, exported by Pixo
  4. The above component renders an image with the given URL and also adds onClick handler 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:

  1. Our App is a functional component using the useState React hook
  2. We keep the image src url in the app state and provide it to the PixoImage component
  3. We also provide the onChange callback to the component, so when Pixo exports the saved images our src gets 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:

Leave a Reply

Your email address will not be published. Required fields are marked *