{"id":18782980,"url":"https://github.com/webex/sdk-component-adapter","last_synced_at":"2025-04-05T20:02:00.039Z","repository":{"id":35134346,"uuid":"203444683","full_name":"webex/sdk-component-adapter","owner":"webex","description":"JS SDK Adapter implementation for Webex Components 🧩 (https://github.com/webex/components)","archived":false,"fork":false,"pushed_at":"2024-11-13T10:41:38.000Z","size":5563,"stargazers_count":7,"open_issues_count":16,"forks_count":42,"subscribers_count":21,"default_branch":"master","last_synced_at":"2024-12-17T02:03:05.432Z","etag":null,"topics":["rxjs","webex-component","webex-components","webex-js-sdk","webex-sdk-adapter","webex-teams-sdk"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webex.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-20T19:51:47.000Z","updated_at":"2024-11-13T10:41:41.000Z","dependencies_parsed_at":"2024-05-21T12:42:26.534Z","dependency_job_id":"37e86d41-7444-4baf-9a60-4716525f0b58","html_url":"https://github.com/webex/sdk-component-adapter","commit_stats":null,"previous_names":[],"tags_count":202,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webex%2Fsdk-component-adapter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webex%2Fsdk-component-adapter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webex%2Fsdk-component-adapter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webex%2Fsdk-component-adapter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webex","download_url":"https://codeload.github.com/webex/sdk-component-adapter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247393547,"owners_count":20931811,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["rxjs","webex-component","webex-components","webex-js-sdk","webex-sdk-adapter","webex-teams-sdk"],"created_at":"2024-11-07T20:37:42.381Z","updated_at":"2025-04-05T20:02:00.015Z","avatar_url":"https://github.com/webex.png","language":"JavaScript","readme":"\u003ch1 align='center' style='border-bottom: none;'\u003eWebex SDK Component Adapter\u003c/h1\u003e\n\u003ch3 align='center'\u003eWebex adapter to share SDK data with the \u003ca href=\"https://github.com/webex/components\"\u003ecomponents\u003c/a\u003e\u003c/h3\u003e\n\u003cp align='center'\u003e\n\u003ca href='https://circleci.com/gh/webex/sdk-component-adapter'\u003e\n    \u003cimg alt='CircleCI' src='https://circleci.com/gh/webex/sdk-component-adapter.svg?style=shield'\u003e\n  \u003c/a\u003e\n  \u003ca href='https://www.npmjs.com/package/@webex/sdk-component-adapter'\u003e\n    \u003cimg alt='npm latest version' src='https://img.shields.io/npm/v/@webex/sdk-component-adapter?label=npm%40latest'\u003e\n  \u003c/a\u003e\n  \u003ca href='#badge'\u003e\n    \u003cimg alt='semantic-release' src='https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg'\u003e\n  \u003c/a\u003e\n  \u003ca href='https://github.com/webex/sdk-component-adapter/blob/master/LICENSE'\u003e\n    \u003cimg src='https://img.shields.io/npm/l/webex.svg' alt='license'\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n**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).\n\n## Project Status\n\nThe Webex Component System is considered to be in beta stage and it's not a generally available product from Webex at this time.\nThis means that the Webex Component System is available for everyone to use but breaking changes may occur as we develop it.\nWe try our best to minimize any breaking changes but they may occur.\nWhile the Webex Component System is not a GA product, we still offer support through all regular channels.\nHowever, bug priority is given to products already generally available.\nWe would love for you to use the Webex Component System and be part of the feedback process!\n\n## Table of Contents\n\n- [Install](#install)\n- [Usage](#usage)\n  - [Setup](#setup)\n    - [Connect](#connect)\n    - [Disconnect](#disconnect)\n  - [Components](#components)\n    - [React Component With Hooks](#react-component-with-hooks)\n    - [React Class Component](#react-class-component)\n- [Contributing](#contributing)\n- [License](#license)\n- [Support](#support)\n\n## Install\n\n```bash\nnpm install --save @webex/components @webex/sdk-component-adapter\n```\n\n## Usage\n\n### Setup\n\nWhen using the Webex SDK Adapter, it is expected to have a fully authenticated SDK instance passed to it:\n\n```js\nconst webex = new Webex({\n  credentials: `\u003cYOUR WEBEX ACCESS_TOKEN\u003e`,\n});\n\nconst adapter = new WebexSDKAdapter(webex);\n```\n\n#### Connect\n\nThe Webex SDK requires different connections to be setup in order for it to be usable.\nSome examples of these connections include device registration and web socket connections.\n\nThese connections are handled by the SDK Adapter, but require the `connect` function to be manually called.\n\n```js\nconst webex = new Webex({\n  credentials: `\u003cYOUR WEBEX ACCESS_TOKEN\u003e`,\n});\n\nconst adapter = new WebexSDKAdapter(webex);\n\nawait adapter.connect();\n\n// Adapter is now ready to make requests.\n```\n\n#### Disconnect\n\nWhen 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:\n\n```js\nawait adapter.disconnect();\n\n// Adapter is now disconnected.\n```\n\n### Components\n\nThe Webex SDK Adapter is meant to be used with Webex Components.\n\nFor more information on how to use **Webex Components**, visit [this page](https://github.com/webex/components/blob/master/README.md).\n\nThe following examples display how you can utilize the Webex SDK Adapter along with Webex Components to provide a fully connected component:\n\n#### React Component With Hooks\n\nUtilizing the `useEffect` hook, we can connect our adapter in a deferred event after initial render.\n\n```js\nimport '@webex/components/dist/css/webex-components.css';\n\nimport React, {useEffect, useState} from 'react';\nimport Webex from 'webex';\nimport WebexSDKAdapter from '@webex/sdk-component-adapter';\nimport {WebexAvatar, WebexDataProvider} from '@webex/components';\n\nconst webex = new Webex({\n  credentials: `\u003cYOUR_ACCESS_TOKEN\u003e`,\n});\nconst adapter = new WebexSDKAdapter(webex);\n\nfunction App() {\n  const [adapterConnected, setAdapterConnected] = useState(false);\n\n  useEffect(() =\u003e {\n    // This is the suggested way to do async hooks.\n    // Ref: https://github.com/facebook/react/issues/14326\n    async function doConnect() {\n      // Wait for the adapter to connect before rendering.\n      await adapter.connect();\n      setAdapterConnected(true);\n    }\n\n    doConnect();\n\n    // On teardown, disconnect the adapter\n    return () =\u003e {\n      adapter.disconnect();\n    }\n  }, []);\n\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      {\n        adapterConnected \u0026\u0026 (\n          \u003cWebexDataProvider adapter={adapter} \u003e\n            \u003cWebexAvatar personID=\"\u003cAVATAR_ID\u003e\" /\u003e\n          \u003c/WebexDataProvider\u003e\n        )\n      }\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n\n```\n\n#### React Class Component\n\nFor traditional React class components, the adapter should connect once the component mounts.\n\n```js\nimport '@webex/components/dist/webexComponents.css';\n\nimport React, { Component } from 'react'\nimport Webex from 'webex';\nimport WebexSDKAdapter from '@webex/sdk-component-adapter';\nimport {WebexAvatar, WebexDataProvider} from '@webex/components';\n\nconst credentials = `\u003cYOUR_ACCESS_TOKEN\u003e`;\n\nconst webex = new Webex({\n  credentials,\n});\n\nexport default class App extends Component {\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      adapterConnected: false\n    };\n\n    this.adapter = new WebexSDKAdapter(webex);\n  }\n\n  async componentDidMount() {\n    await adapter.connect();\n    // Once adapter connects, set our app state to ready.\n    this.setState({adapterConnected: true});\n  }\n\n  async componentWillUnmount() {\n    // On teardown, disconnect the adapter.\n    await this.adapter.disconnect();\n  }\n\n  render() {\n    return (\n      \u003cdiv className=\"App\"\u003e\n        {\n          this.state.adapterConnected \u0026\u0026 (\n            \u003cWebexDataProvider adapter={this.adapter} \u003e\n              \u003cWebexAvatar personID=\"\u003cAVATAR_ID\u003e\" /\u003e\n            \u003c/WebexDataProvider\u003e\n          )\n        }\n      \u003c/div\u003e\n    )\n  }\n}\n\n```\n\n## Contributing\n\nWe'd love for you to contribute to our source code and to make **Webex SDK Adapter** even better than it is today!\nHere are some [guidelines](https://github.com/webex/sdk-component-adapter/blob/master/CONTRIBUTING.md)\nthat we'd like you to follow.\n\n## License\n\n[MIT License](https://opensource.org/licenses/MIT)\n\n## Support\n\nFor more developer resources, tutorials and support, visit the Webex developer portal, https://developer.webex.com.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebex%2Fsdk-component-adapter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebex%2Fsdk-component-adapter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebex%2Fsdk-component-adapter/lists"}