Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/webex/sdk-component-adapter
JS SDK Adapter implementation for Webex Components 🧩 (https://github.com/webex/components)
https://github.com/webex/sdk-component-adapter
rxjs webex-component webex-components webex-js-sdk webex-sdk-adapter webex-teams-sdk
Last synced: about 7 hours ago
JSON representation
JS SDK Adapter implementation for Webex Components 🧩 (https://github.com/webex/components)
- Host: GitHub
- URL: https://github.com/webex/sdk-component-adapter
- Owner: webex
- License: mit
- Created: 2019-08-20T19:51:47.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-05-21T18:39:56.000Z (6 months ago)
- Last Synced: 2024-05-22T12:57:12.027Z (6 months ago)
- Topics: rxjs, webex-component, webex-components, webex-js-sdk, webex-sdk-adapter, webex-teams-sdk
- Language: JavaScript
- Homepage:
- Size: 3.66 MB
- Stars: 7
- Watchers: 19
- Forks: 38
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
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](https://github.com/webex/webex-js-sdk) to [Webex Components](https://github.com/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](#install)
- [Usage](#usage)
- [Setup](#setup)
- [Connect](#connect)
- [Disconnect](#disconnect)
- [Components](#components)
- [React Component With Hooks](#react-component-with-hooks)
- [React Class Component](#react-class-component)
- [Contributing](#contributing)
- [License](#license)
- [Support](#support)
## Install
```bash
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:
```js
const webex = new Webex({
credentials: ``,
});
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.
```js
const webex = new Webex({
credentials: ``,
});
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:
```js
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](https://github.com/webex/components/blob/master/README.md).
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.
```js
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: ``,
});
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 (
{
adapterConnected && (
)
}
);
}
export default App;
```
#### React Class Component
For traditional React class components, the adapter should connect once the component mounts.
```js
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 = ``;
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 (
{
this.state.adapterConnected && (
)
}
)
}
}
```
## 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](https://github.com/webex/sdk-component-adapter/blob/master/CONTRIBUTING.md)
that we'd like you to follow.
## License
[MIT License](https://opensource.org/licenses/MIT)
## Support
For more developer resources, tutorials and support, visit the Webex developer portal, https://developer.webex.com.