Integration Guide for React.js Applications

Learn how to seamlessly integrate the Picsart Create Editor into your React.js application.

Suggest Edits

Adding the Picsart Create Editor Script

First, include the Picsart Create Editor 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 Create Editor 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 Create Editor in React

After setting up the script and container, you can instantiate the Picsart Create Editor 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 Create Editor 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 3 months ago