Webex SDK Component Adapter

Webex adapter to share SDK data with the components

Webex SDK Adapter is a library of adapters to provide live data from Webex JavaScript SDK to Webex Components.

Project Status

The Webex Component System is considered to be in beta stage and it's not a generally available product from Webex at this time. This means that the Webex Component System is available for everyone to use but breaking changes may occur as we develop it. We try our best to minimize any breaking changes but they may occur. While the Webex Component System is not a GA product, we still offer support through all regular channels. However, bug priority is given to products already generally available. We would love for you to use the Webex Component System and be part of the feedback process!

Table of Contents

• Install
• Usage
  • Setup
    • Connect
    • Disconnect
  • Components
    • React Component With Hooks
    • React Class Component
• Contributing
• License
• Support

Install

npm install --save @webex/components @webex/sdk-component-adapter

Usage

Setup

When using the Webex SDK Adapter, it is expected to have a fully authenticated SDK instance passed to it:

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

const adapter = new WebexSDKAdapter(webex);

Connect

The Webex SDK requires different connections to be setup in order for it to be usable. Some examples of these connections include device registration and web socket connections.

These connections are handled by the SDK Adapter, but require the connect function to be manually called.

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

const adapter = new WebexSDKAdapter(webex);

await adapter.connect();

// Adapter is now ready to make requests.

Disconnect

When the adapter is no longer going to be used, the disconnect function will do the necessary tear-down of all the connections created in the connect function:

await adapter.disconnect();

// Adapter is now disconnected.

Components

The Webex SDK Adapter is meant to be used with Webex Components.

For more information on how to use Webex Components, visit this page.

The following examples display how you can utilize the Webex SDK Adapter along with Webex Components to provide a fully connected component:

React Component With Hooks

Utilizing the useEffect hook, we can connect our adapter in a deferred event after initial render.

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;

React Class Component

For traditional React class components, the adapter should connect once the component mounts.

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>
    )
  }
}

Contributing

We'd love for you to contribute to our source code and to make Webex SDK Adapter even better than it is today! Here are some guidelines that we'd like you to follow.

License

MIT License

Support

For more developer resources, tutorials and support, visit the Webex developer portal, https://developer.webex.com.