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 PricingSetup#
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.
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.
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
.
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
.
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 (<divref={cesdk_container}style={{ width: '100vw', height: '100vh' }}></div>);};export default Component;