Guides

Integration Guide for React.js Applications

Learn how to seamlessly integrate the Picsart Photo and Video Editor SDK into your React.js application.

Suggest Edits

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 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=x.y.z&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="picsart_editor_container" style={{ width: '1080px', height: '768px' }}>  </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 window.Picsart({  
        propertyId: 'account_id_or_domain',  
        containerId: 'picsart_editor_container',  
        accessibilityTitle: 'Picsart Editor',  
        logo: 'your_logo_url', 
        apiKey:'your_apikey', 
      });

    PicsartInstance.onOpen(() => {  
      console.log('Picsart Editor for Web is ready!');  
    });
  
    PicsartInstance.open();
  }, []);

  return (  
    <div id="picsart_editor_container" style={{ width: '1080px', height: '768px' }}>  </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.

Updated about 1 month ago