Integrate CreativeEditor SDK with React

In this example, we will show you how to integrate CreativeEditor SDK with React.

Explore a full code sample of the integration on CodeSandbox or view the code on GitHub.

Prerequisites#

No trial license key required.#

The trial of CreativeEditor SDK works without a license key. A commercial license key is required for use in a production environment. Get a license key at Pricing

Setup#

Note that, for convenience we serve all SDK assets (e.g. images, stickers, fonts etc.) from our CDN by default. For use in a production environment we recommend serving assets from your own servers.

1. Add CE.SDK to your Project#

Install the @cesdk/cesdk-js dependency via

npm install --save @cesdk/cesdk-js.

The SDK is served entirely via CDN, so we just need to import the CE.SDK module and the stylesheet containing the default theme settings.

CreativeEditorSDK.jsx

import CreativeEditorSDK from '@cesdk/cesdk-js';

2. Create an empty Container#

We need to add an empty <div> as a container for the SDK. We configure the <div> element to fully fill the browser window.

CreativeEditorSDK.jsx

    <div
      ref={cesdk_container}
      style={{ width: '100vw', height: '100vh' }}
    ></div>

3. Create a component containing the SDK#

We'll now create a CreativeEditorSDK component, that's responsible for initializing the SDK and attaching it to the previously created container. To allow configuration of the SDK from outside the component, we pass a config object from the component's props.

CreativeEditorSDK.jsx

const Component = (props = {}) => {
  const cesdk_container = useRef(null);
  useEffect(() => {
    if (cesdk_container.current) {
      CreativeEditorSDK.init(cesdk_container.current, props.config).then(
        (instance) => {
          /** do something with the instance of CreativeEditor SDK **/
        }
      );
    }
  }, [props, cesdk_container]);

  return (
    <div
      ref={cesdk_container}
      style={{ width: '100vw', height: '100vh' }}
    ></div>
  );
};

4. Managing the container reference#

To let CE.SDK use the container created by our component, we use useRef to acquire a reference to the element and pass it as the first parameter to CreativeEditorSDK.init.

CreativeEditorSDK.jsx

  const cesdk_container = useRef(null);

5. Serving Webpage locally#

In order to use the editor we need to run our project via yarn.

yarn start will spin up a development server at http://localhost:3000

Congratulations!#

You've got CE.SDK up and running. Get to know the SDK and dive into the next steps, when you're ready:

import React from 'react';
import './index.css';

import CreativeEditorSDK from '@cesdk/cesdk-js';

import { useRef, useEffect } from 'react';

const Component = (props = {}) => {
  const cesdk_container = useRef(null);
  useEffect(() => {
    if (cesdk_container.current) {
      CreativeEditorSDK.init(cesdk_container.current, props.config).then(
        (instance) => {
          /** do something with the instance of CreativeEditor SDK **/
        }
      );
    }
  }, [props, cesdk_container]);

  return (
    <div
      ref={cesdk_container}
      style={{ width: '100vw', height: '100vh' }}
    ></div>
  );
};

export default Component;