const webex = new Webex({
  credentials: `<YOUR WEBEX ACCESS_TOKEN>`,
});

const adapter = new WebexSDKAdapter(webex);

const webex = new Webex({
  credentials: `<YOUR WEBEX ACCESS_TOKEN>`,
});

const adapter = new WebexSDKAdapter(webex);

await adapter.connect();

// Adapter is now ready to make requests.

await adapter.disconnect();

// Adapter is now disconnected.

import '@webex/components/dist/css/webex-components.css';

import React, {useEffect, useState} from 'react';
import Webex from 'webex';
import WebexSDKAdapter from '@webex/sdk-component-adapter';
import {WebexAvatar, WebexDataProvider} from '@webex/components';

const webex = new Webex({
  credentials: `<YOUR_ACCESS_TOKEN>`,
});
const adapter = new WebexSDKAdapter(webex);

function App() {
  const [adapterConnected, setAdapterConnected] = useState(false);

  useEffect(() => {
    // This is the suggested way to do async hooks.
    // Ref: https://github.com/facebook/react/issues/14326
    async function doConnect() {
      // Wait for the adapter to connect before rendering.
      await adapter.connect();
      setAdapterConnected(true);
    }

    doConnect();

    // On teardown, disconnect the adapter
    return () => {
      adapter.disconnect();
    }
  }, []);


  return (
    <div className="App">
      {
        adapterConnected && (
          <WebexDataProvider adapter={adapter} >
            <WebexAvatar personID="<AVATAR_ID>" />
          </WebexDataProvider>
        )
      }
    </div>
  );
}

export default App;

import '@webex/components/dist/webexComponents.css';

import React, { Component } from 'react'
import Webex from 'webex';
import WebexSDKAdapter from '@webex/sdk-component-adapter';
import {WebexAvatar, WebexDataProvider} from '@webex/components';

const credentials = `<YOUR_ACCESS_TOKEN>`;

const webex = new Webex({
  credentials,
});

export default class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      adapterConnected: false
    };

    this.adapter = new WebexSDKAdapter(webex);
  }

  async componentDidMount() {
    await adapter.connect();
    // Once adapter connects, set our app state to ready.
    this.setState({adapterConnected: true});
  }

  async componentWillUnmount() {
    // On teardown, disconnect the adapter.
    await this.adapter.disconnect();
  }

  render() {
    return (
      <div className="App">
        {
          this.state.adapterConnected && (
            <WebexDataProvider adapter={this.adapter} >
              <WebexAvatar personID="<AVATAR_ID>" />
            </WebexDataProvider>
          )
        }
      </div>
    )
  }
}