Integration Guide for React.js Applications

💡
We strongly recommend first checking out the Quick Start before exploring the setup details for React.js applications.

Adding the Picsart Photo and Video Editor SDK Script

First, include the Picsart Photo and Video Editor SDK script in your React.js project. This script should be placed within the <head> tag of your main HTML file (usually index.html in React projects), ensuring that the script is loaded on all pages.

The script requires to specify the version of the Picsart Photo and Video Editor SDK using the v=x.y.z parameter.

<!-- In your index.html -->

<head>
  <script src="https://sdk.picsart.io/cdn?v=1.13.2&key=sdk"></script>
</head>

Creating a Container for the Editor in React

Within your React component, create a container element with a unique identifier and specific dimensions. The minimum width for the container should be 768px.

// In your React component file  
const PicsartEditorContainer = () => {  
  return (  
    <div id="containerId" style={{ width: '100%', height: '100%' }}></div>
  );  
};

Instantiating the Picsart Photo and Video Editor SDK in React

After setting up the script and container, you can instantiate the Picsart Photo and Video Editor SDK within your React component. Utilize the useEffect hook to ensure the editor is initialized when the component mounts. If you are using Typescript remember to declare Picsart globally, and example is included in the following code:

import { useEffect } from 'react';

const PicsartEditorContainer = () => {  
  useEffect(() => { 
        const PicsartInstance = new Picsart({
          apiKey: 'YOUR_API_KEY_GOES_HERE', // provided during the signup process
          customerId: 'CUSTOMER_ID_GOES_HERE', // provided during the signup process
          propertyId: 'YOUR_PROPERTY_ID_GOES_HERE', // provided during the signup process
          containerId: 'containerId', // should match the identifier of the container element
          title: 'Photo Print Designer'
        });
   
        // adding new lines here to open and save
        const imageUrl = "https://cdn-cms-uploads.picsart.com/cms-uploads/05b3d2e9-1fd6-43f3-b342-b232638c5614.png";
        PicsartInstance.open({
          imageUrl
        });
        
        PicsartInstance.onExport((output) => {
          if (output.data.imageData) {
            const blob = output.data.imageData;
            const link = document.createElement('a');
            link.href = typeof blob === 'string' ? blob : URL.createObjectURL(blob);
            link.download = 'picsart-editor-result-image.png';
            document.body.append(link);
            link.click();
            link.remove();
          }
        });
  }, []);

  return (  
    <div id="containerId" style={{ width: '100%', height: '100%' }}></div>
  );  
};

export default PicsartEditorContainer;

declare global {
    interface Window {
        Picsart:any;
    }
}

In this setup, the Picsart Photo and Video Editor SDK is integrated within a React component. The useEffect hook ensures that the editor is initialized only once when the component is mounted. Remember to replace placeholders like your_apikey, account_id_or_domain, and your_logo_url with actual values relevant to your application.