Getty Images Library SDK Getting Started - React JS

Let's get started!#

We will be using create-react-app for simplicity.

Create a project#

• Start a new project with create-react-app

npx create-react-app my-app
cd my-app
npm run start

• Then open http://localhost:3000/ to see your app.

Installing peer dependencies#

Getty Images Library SDK needs following peer dependencies:

1. React >= 16.8.6
2. React DOM >= 16.8.6
3. Styled Components >= 4.4
4. PhotoEditorSDK >= 5.17.3
5. Getty Images plugin for PhotoEditor SDK >= 1.2.0

React and React DOM are already installed using Create React App.

• Run npm install --save styled-components photoeditorsdk @pesdk/getty-images to include the remaining dependencies in the project.

Creating a library component#

import React, { useEffect, useState } from 'react';
import {
  PhotoEditorSDKUI,
  EditorApi,
  UIEvent,
} from '@pesdk/getty-images-integration';

export const App: React.FC = () => {
  const [editor, setEditor] = useState<EditorApi>();
  useEffect(() => {
    const initEditor = async () => {
      const editor = await PhotoEditorSDKUI.init({
        gettyAPIKey: "",
        gettyTokenURL: `${window.location.href}/token`,
        container: '#editor',
      });
      setEditor(editor);
    };
    initEditor();
  }, []);

  useEffect(() => {
    if (!editor) return;
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    editor.on(UIEvent.EXPORT, async img => {
      alert('Image exported!');
    });
  }, [editor]);

  return <div id="editor" />;
};

Providing the assets#

The assets folder can be copied from the public GitHub repo or from node_modules/photoeditorsdk to the public folder of your project.

Serving OAuth Token for Getty's API#

In order to authenticate with the Getty Images API you need to implement an Oauth flow that relies on secure machine-to-machine communication. Consult this section of the guide for an example.

Ready to go!#

There you have it. Getty Images Library SDK for web is ready to use. Refer to the configuration documentaion for more configuration options.