{"id":13764519,"url":"https://github.com/webex/react-widgets","last_synced_at":"2025-05-15T06:07:33.235Z","repository":{"id":37736105,"uuid":"76988408","full_name":"webex/react-widgets","owner":"webex","description":"React components and Redux modules for embedded Webex Teams","archived":false,"fork":false,"pushed_at":"2025-02-20T20:33:25.000Z","size":56258,"stargazers_count":84,"open_issues_count":12,"forks_count":119,"subscribers_count":25,"default_branch":"master","last_synced_at":"2025-05-07T05:48:24.203Z","etag":null,"topics":["javascript","react","webex","webex-teams","widget"],"latest_commit_sha":null,"homepage":"https://developer.webex.com","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,"zenodo":null}},"created_at":"2016-12-20T20:13:07.000Z","updated_at":"2025-02-25T03:35:45.000Z","dependencies_parsed_at":"2023-07-16T22:17:34.110Z","dependency_job_id":"bd3e4746-873a-45b2-9ec6-9041039c05db","html_url":"https://github.com/webex/react-widgets","commit_stats":{"total_commits":3909,"total_committers":54,"mean_commits":72.38888888888889,"dds":0.6436428754157073,"last_synced_commit":"15ea55a027c99a73b50a99bdd2f55f40036efe80"},"previous_names":["ciscospark/react-ciscospark","webex/react-ciscospark"],"tags_count":794,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webex%2Freact-widgets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webex%2Freact-widgets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webex%2Freact-widgets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webex%2Freact-widgets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webex","download_url":"https://codeload.github.com/webex/react-widgets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254283340,"owners_count":22045140,"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":["javascript","react","webex","webex-teams","widget"],"created_at":"2024-08-03T16:00:22.029Z","updated_at":"2025-05-15T06:07:28.220Z","avatar_url":"https://github.com/webex.png","language":"JavaScript","funding_links":[],"categories":["Client SDKs"],"sub_categories":["Advanced APIs"],"readme":"# react-widgets\n\n\n[![CircleCI](https://img.shields.io/circleci/project/github/webex/react-widgets/master.svg)](https://circleci.com/gh/webex/react-widgets)\n[![license](https://img.shields.io/github/license/webex/react-widgets.svg)](https://github.com/webex/react-widgets/blob/master/LICENSE)\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)\n\n\u003e Webex Widgets for React\n\nThe Webex Widgets for React library allows developers to easily incorporate Webex functionality into an application.\n\n## Table of Contents\n\n- [Background](#background)\n- [Widgets](#widgets)\n- [Usage](#usage)\n- [Install](#install)\n  - [Serve from Source](#serve-from-source)\n- [Version](#version)\n- [Coding Style](#coding-style)\n- [Code Verification](#code-verification)\n- [Contributing](#contributing)\n- [Issues](#issues)\n- [License](#license)\n\n## Background\n\nThis library allows React developers to quickly and easily create a Webex experience within their apps. Here we provide basic components (e.g. buttons, text fields, icons) that reflect the styles and aesthetics of Webex, along with more complex, complete widgets, such as the Webex Space Widget.\n\nThe basic components are just presentational React \u003chttps://github.com/facebook/react\u003e components, while our widgets leverage Redux \u003chttps://github.com/reactjs/redux\u003e and the Webex Javascript SDK \u003chttps://github.com/webex/webex-js-sdk\u003e.\n\n## Widgets\n\nWhile many of our components are purely presentational, some have extended functionality that provide a piece of the full Webex experience. These fully self contained elements are called `Widgets` and are available here:\n\n- [Space Widget](./packages/node_modules/@webex/widget-space)\n- [Recents Widget](./packages/node_modules/@webex/widget-recents)\n\n## Usage\n\nA functional demo of both Space and Recents widgets can be loaded by\nsimply running:\n\n```sh\n$ npm start\n```\n\n## Install\n\n### Serve From Source\n\n1. Clone this repo using a git client (e.g. `git clone https://github.com/webex/react-widgets.git`)\n1. Run `npm install` from the root of the repo. You will want to run this every time you pull down any new updates.\n1. From the root of the repo, run the following to serve the widgets demo:\n    ```sh\n    npm start\n    ```\n1. The widget demo will be running on http://localhost:8000\n\n## Version\n\nWhen a widget is bundled and loaded via script tag, the version number is available in the following ways:\n\n- A comment at the top of each bundled file\n- Programmatic access after a widget has been registered: `window.webex.widgetFn.{widgetName}.version` (e.g. `window.webex.widgetFn.spaceWidget.version`)\n- Access after a widget has been instantiated: `window.webex.widget({widgetEl}).version` (e.g. `window.webex.widget(document.getElementById('myWidget')).version`)\n\n## Coding Style\n\nWe follow our [Webex Web Styleguide](https://github.com/webex/web-styleguide) when developing any web based libraries and tools. Please check it out and do your best to follow our norms when contributing to this codebase.\n\n## Code Verification\n\nAs a best practice, we provide a [Sub-resource Integrity (SRI)](https://www.w3.org/TR/SRI/) hash for all of our CDN hosted distributable files. A manifest listing all of the files with associated `integrity` hashes can be found for the latest build, where `{NAME}` is the name of the widget at `https://code.s4d.io/widget-{NAME}/production/manifest.json`.\n\n\u003e **Manifest Example**\n\u003e\n\u003e ``` json\n\u003e {\n\u003e   \"version\": \"0.1.215\",\n\u003e   \"files\": [\n\u003e      {\n\u003e        \"name\": \"bundle.js\",\n\u003e        \"url\": \"https://code.s4d.io/widget-space/archives/0.1.120/bundle.js\",\n\u003e        \"signature\": \"kfVRBKftbb3OQ4VmYOqstb9V0abqXJzY1L0Ww/zsbiF+bGaDkgiLWqztTCh43uMsUtzEgpF0M29pr67gSlZLSOq6iUgBg9zGhiVoVqlxEUGqxdOXkeDLRTOr16KkBtAObBidWauyNOvA+6FAC71UP2yFTXIadV7z1W7tIwt+wOfGqqaBwzMCuXl1bS4Va5Fj+s2SLsRfuDrSG0gPbG499bl0v6QkWKvkYPjW4v/BffyJNFJsu2rubkPXSCEk5yU4UpOJqsQPJ+sx4s9QFgMtWbNZ+cqnBuPFPBrr5E31lOS3eJwR9Jx139ZTpcBxP19qM6zV9ategsil7w1dIN1HVbU6H/byLHTLjf39kCOsNJk6yo+B9FiD2By8wSDi4ykD6MJEH7OqOxsb49/FsgALSmJB1iIexU4xQWE3HhupEtlvv+YCQtUE0IBMVEmjauhLzJ0gBemOvzo7eMeWEsrTSSMtePS+wp9UT7uvmz7l/UIBeIuhT87YKAt0AHgE3C0pE/JOh3JofshVZ++mC1A+bjSl/+Y41mU8BclWYnGfXDwkYevzi5SxklS77eD1J/4Q+DXUkDNAR9DQe/UHZ8nrnW+GlUATwHaqhW4883p/j9zGuGEzcEQeUDHBMl23c0z3hUIXfYfhn7dExyHzTzMZQaKFD5Dl7+CgmL5V6FHY3Iw=\",\n\u003e        \"integrity\": \"sha384-3bMDdbkrYdS5m4SA7/gzkh7/G9ppEV0BVyPs2TZqbny/z9aPaw4D3DHS1+Wg9phW\"\n\u003e     }\n\u003e   ]\n\u003e }\n\u003e ```\n\nTo find the SRI hash for a specific build of the widgets, you can use the following URL, replacing {VERSION} with the specific version you are looking for: `https://code.s4d.io/widget-space/archives/{VERSION}/manifest.json`.\n\nAdditionally, for those who want an additional layer of verification, a `signature` has been provided that is signed by a private key. You can use our [public key](./widget-key.pub) to verify this signature. Here is example of the verification process using the nodeJS built-in `crypto` library:\n\n``` js\nconst crypto = require('crypto');\nfunction verifySignature({\n  data,\n  signature,\n  publicKey\n}) {\n  // Verify that we signed correctly using public key\n  const verify = crypto.createVerify('RSA-SHA384');\n  verify.write(data);\n  verify.end();\n\n  // True if signature is verified\n  return verify.verify(publicKey, signature, 'base64');\n}\n```\n\n## Contributing\n\nSee [CONTRIBUTING](CONTRIBUTING.md) for details.\n\n## Issues\n\nPlease reach out to our developer support team for any issues you may be experiencing with the SDK.\n\n- \u003chttps://developer.webex.com/support\u003e\n- \u003cdevsupport@webex.com\u003e\n\n## License\n\n\u0026copy; 2017-2020 Cisco Systems, Inc. and/or its affiliates. All Rights Reserved.\n\nSee [LICENSE](LICENSE) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebex%2Freact-widgets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebex%2Freact-widgets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebex%2Freact-widgets/lists"}