{"id":18783016,"url":"https://github.com/webex/components","last_synced_at":"2025-04-05T22:03:36.076Z","repository":{"id":35055069,"uuid":"198456500","full_name":"webex/components","owner":"webex","description":"Embed the power of Webex in your web applications, on your own terms 💪🏼","archived":false,"fork":false,"pushed_at":"2024-12-30T06:52:23.000Z","size":154380,"stargazers_count":14,"open_issues_count":28,"forks_count":55,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-03-29T21:02:41.586Z","etag":null,"topics":["react-components","webex","webex-adapter","webex-component","webex-open-source","webex-teams","webex-web"],"latest_commit_sha":null,"homepage":"https://webex.github.io/components/storybook","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-07-23T15:18:51.000Z","updated_at":"2024-12-30T06:52:26.000Z","dependencies_parsed_at":"2024-08-13T07:45:46.118Z","dependency_job_id":"f5217edf-ea70-45b1-8121-7f0af608f1cb","html_url":"https://github.com/webex/components","commit_stats":null,"previous_names":[],"tags_count":426,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webex%2Fcomponents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webex%2Fcomponents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webex%2Fcomponents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webex%2Fcomponents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webex","download_url":"https://codeload.github.com/webex/components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406084,"owners_count":20933803,"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":["react-components","webex","webex-adapter","webex-component","webex-open-source","webex-teams","webex-web"],"created_at":"2024-11-07T20:37:52.760Z","updated_at":"2025-04-05T22:03:36.050Z","avatar_url":"https://github.com/webex.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align='center' style='border-bottom: none;'\u003eWebex Components\u003c/h1\u003e\n\u003ch3 align='center'\u003eLibrary of React components to easily embed into your web applications!\u003c/h3\u003e\n\u003cp align='center'\u003e\n\u003ca href='https://circleci.com/gh/webex/components'\u003e\n    \u003cimg alt='CircleCI' src='https://circleci.com/gh/webex/components.svg?style=shield'\u003e\n  \u003c/a\u003e\n  \u003ca href='https://www.npmjs.com/package/@webex/components'\u003e\n    \u003cimg alt='npm latest version' src='https://img.shields.io/npm/v/@webex/components?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/components/blob/master/package.json#L28'\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 Components** is a set of [React](https://reactjs.org) components following Webex standard styling,\naimed at react developers that want to embed the components into their applications.\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.\n\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- [Project Status](#project-status)\n- [Table of Contents](#table-of-contents)\n- [Demo](#demo)\n- [Install](#install)\n- [Webex Components vs Webex Widgets](#webex-components-vs-webex-widgets)\n- [Usage](#usage)\n    - [Webex Components Styles](#webex-components-styles)\n      - [JavaScript](#javascript)\n      - [HTML](#html)\n  - [Adapters](#adapters)\n  - [Components](#components)\n- [Contributing](#contributing)\n  - [Issues](#issues)\n- [License](#license)\n- [Support](#support)\n\n## Demo\n\nWe use [Storybook](https://storybook.js.org) to showcase all supported components. Our Storybook can be found at https://webex.github.io/components/storybook.\n\n## Install\n\n```bash\nnpx install-peerdeps @webex/components\n```\n\n## Webex Components vs Webex Widgets\n\nIn addition to the Webex Component System, we also offer the\n[Webex Widgets](https://github.com/webex/widgets#webex-widgets).\nThe Webex Component System (sometimes shortened as _Webex Components_) is a set of\nReact components that, while following Webex styling, allow for more granularity\nin terms of layout and source of data. See [usage](#usage) section.\n\nWebex Widgets are based on Webex Components but include the adapter that uses\nour [Javascript SDK](https://github.com/webex/webex-js-sdk) to talk to Webex services for you.\nThis means that the Webex Widgets use the\n[SDK Component Adapter](https://github.com/webex/sdk-component-adapter#webex-sdk-component-adapter)\nto inject the Webex data.\nAll you need is a valid access token and a few parameters based on the widget you want to use.\n\nYou have to take the Widget layout as-is, but the benefit is that there are no configurations needed.\nInstall, copy-paste and you have the power of Webex in your application!\n\nTo learn more on the Webex Widgets head to its Github repository at\nhttps://github.com/webex/widgets.\n\n## Usage\n#### Webex Components Styles\n\nThere are two ways to do this:\n\n##### JavaScript\n\nIn your `index.js`, add the following import:\n\n```js\nimport '@webex/components/dist/css/webex-components.css';\n\n...\n```\n\n##### HTML\n\nIn the `\u003chead\u003e` of your `index.html`, add the following imports:\n\n```html\n\u003chead\u003e\n  ...\n  \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"node_modules/@webex/components/dist/css/webex-components.css\" /\u003e\n\u003c/head\u003e\n```\n\n### Adapters\n\nWebex Components are self-updating, meaning, they know how to fetch the data they need.\nData is passed to components via adapter classes (see [adapters](./src/adapters)).\nAdapters are an uniform interface for the Webex Components to consume.\nThey also know how to map the data from their data source to the data the components need.\n\nTo use a Webex Component, start by creating a Webex Adapter:\n\n```js\nimport {WebexJSONAdapter} from '@webex/components';\n\nconst adapter = new WebexJSONAdapter(jsonData);\n```\n\nAdapters may interact with different data source types.\nFor instance, as part of the Webex Component repository we distribute a [JSON adapter](./src/adapters) that reads data from JSON files.\nWe also are working on offering [an adapter](https://github.com/webex/sdk-component-adapter) for the [Webex browser SDK](https://github.com/webex/webex-js-sdk).\n\n### Components\n\nPutting everything together - styles, adapters and components - this is a simple example of how using a component would look like:\n\n```js\nimport '@webex/components/dist/css/webex-components.css';\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {WebexAvatar, WebexDataProvider, WebexJSONAdapter} from '@webex/components';\n\n// jsonData represents an JSON object with the data to feed components\nconst adapter = new WebexJSONAdapter(jsonData);\n\nReactDOM.render(\n  \u003cWebexDataProvider adapter={adapter}\u003e\n    \u003cWebexAvatar personID=\"XYZ\" /\u003e\n  \u003c/WebexDataProvider\u003e,\n  document.getElementById('root')\n);\n```\n\n_Happy Coding!_\n\n## Contributing\n\nWe'd love for you to contribute to our source code and to make **Webex Components** even better than it is today!\nHere are some [guidelines](https://github.com/webex/components/blob/master/CONTRIBUTING.md) that we'd like you to follow.\n\n### Issues\n\nPlease open an [issue](https://github.com/webex/components/issues) and we will get to it in an orderly manner.\nPlease leave as much as information as possible for a better understanding.\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebex%2Fcomponents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebex%2Fcomponents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebex%2Fcomponents/lists"}