README
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
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
Support
For more developer resources, tutorials and support, visit the Webex developer portal, https://developer.webex.com.