Tutorial: React

Using the JavaScript SDK in a React Application

1. Make sure you have a recent version of Node.js installed.
2. Create a React App

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

3. Add zfe-embed-sdk.js to the src folder of your new React app.
4. Add ZfeComponent.js to the src folder and include the following code in it:

import React from 'react';
import ZFE from './zfe-embed-sdk';
import './App.css';

class ZfeComponent extends React.Component {
  connect(url) {
    this.sdk = new ZFE({
      url: url,
      target: document.getElementById('zfe-component')
    });
    return this.sdk.connect();
  }

  disconnect() {
    this.sdk.disconnect();
  }

  render() {
    return (
      <div id="zfe-component"></div>
    );
  }
}

export default ZfeComponent

5. Replace the contents of App.js with

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ZfeComponent from './ZfeComponent';

class App extends Component {
  defaultUrl = 'https://abc.company.com';

  onClickConnect() {
    this._zfeComponent.connect(this._zfeUrlInput.value)
      .then(() => {
        // After connecting, the sdk is available at this._zfeComponent.sdk:
        let sessionManager = this._zfeComponent.sdk.getSessionManager();
      });
  }

  onClickDisconnect() {
    this._zfeComponent.disconnect();
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-React-logo" alt="logo" />
        </header>
        <div>
          <span id="url">Session server URL:  </span>
          <input type="text" defaultValue={this.defaultUrl} ref={(i) => this._zfeUrlInput = i}></input>
          <button onClick={this.onClickConnect.bind(this)}>Connect</button>
          <button onClick={this.onClickDisconnect.bind(this)}>Disconnect</button>
          <ZfeComponent ref={(component) => this._zfeComponent = component}></ZfeComponent>
        </div>
      </div>
    );
  }
}

export default App;

6. Replace the contents of App.css with

.App-React-logo {
  animation: App-logo-spin infinite 10s linear;
  height: 5vmin;
  pointer-events: none;
}

.App-header {
  background-color: #282c34;
  min-height: 5vh;
}

span#url {
  margin-left: 20px;
}

button { 
  margin: 1px 0 1px 10px;
  width: 80px;
}

input { 
  width: 250px;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#zfe-component {
  width: 1200px;
  height: 800px;
}```

7. If you receive eslint messages from the sdk when building your app such as

./src/zfe-embed-sdk.js Line 4: 'define' is not defined no-undef

You can disable eslint in several ways but easiest might be to add `/* eslint-disable */` to the top of zfe-embed-sdk.js.