{"id":13565601,"url":"https://github.com/gatewayapps/react-adaptivecards","last_synced_at":"2025-04-03T22:31:45.282Z","repository":{"id":47628815,"uuid":"124436827","full_name":"gatewayapps/react-adaptivecards","owner":"gatewayapps","description":"A react wrapper for microsoft/adaptivecards","archived":false,"fork":false,"pushed_at":"2021-08-20T19:43:07.000Z","size":520,"stargazers_count":22,"open_issues_count":6,"forks_count":11,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-18T14:49:22.667Z","etag":null,"topics":["hacktoberfest"],"latest_commit_sha":null,"homepage":"https://gatewayapps.github.io/react-adaptivecards/","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/gatewayapps.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-08T19:16:48.000Z","updated_at":"2025-01-16T21:03:52.000Z","dependencies_parsed_at":"2022-09-06T13:11:15.276Z","dependency_job_id":null,"html_url":"https://github.com/gatewayapps/react-adaptivecards","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gatewayapps%2Freact-adaptivecards","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gatewayapps%2Freact-adaptivecards/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gatewayapps%2Freact-adaptivecards/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gatewayapps%2Freact-adaptivecards/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gatewayapps","download_url":"https://codeload.github.com/gatewayapps/react-adaptivecards/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247090282,"owners_count":20881942,"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":["hacktoberfest"],"created_at":"2024-08-01T13:01:50.945Z","updated_at":"2025-04-03T22:31:44.720Z","avatar_url":"https://github.com/gatewayapps.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-adaptivecards\nA react wrapper for [microsoft/adaptivecards](https://adaptivecards.io)\n\n![](https://gatewayapps.github.io/react-adaptivecards/images/sample.png \"Adaptive Cards\")\n\n\n### Installation\n```js static\n  npm install --save react-adaptivecards\n```\n\n### Usage\n```js static\n  import AdaptiveCard from 'react-adaptivecards'\n```\n\n### React-AdaptiveCard sample\n```js\n\u003cAdaptiveCard style={{width: '500px', border: '1px solid black'}} payload={{\n  \"$schema\": \"http://adaptivecards.io/schemas/adaptive-card.json\",\n  \"type\": \"AdaptiveCard\",\n  \"version\": \"1.0\",\n  \"body\": [\n    {\n      \"speak\": \"Tom's Pie is a Pizza restaurant which is rated 9.3 by customers.\",\n      \"type\": \"ColumnSet\",\n      \"columns\": [\n        {\n          \"type\": \"Column\",\n          \"width\": 2,\n          \"items\": [\n            {\n              \"type\": \"TextBlock\",\n              \"text\": \"PIZZA\"\n            },\n            {\n              \"type\": \"TextBlock\",\n              \"text\": \"Tom's Pie\",\n              \"weight\": \"bolder\",\n              \"size\": \"extraLarge\",\n              \"spacing\": \"none\"\n            },\n            {\n              \"type\": \"TextBlock\",\n              \"text\": \"4.2 ★★★☆ (93) · $$\",\n              \"isSubtle\": true,\n              \"spacing\": \"none\"\n            },\n            {\n              \"type\": \"TextBlock\",\n              \"text\": \"**Matt H. said** \\\"I'm compelled to give this place 5 stars due to the number of times I've chosen to eat here this past year!\\\"\",\n              \"size\": \"small\",\n              \"wrap\": true\n            }\n          ]\n        },\n        {\n          \"type\": \"Column\",\n          \"width\": 1,\n          \"items\": [\n            {\n              \"type\": \"Image\",\n              \"url\": \"https://picsum.photos/300?image=882\",\n              \"size\": \"auto\"\n            }\n          ]\n        }\n      ]\n    }\n  ],\n  \"actions\": [\n    {\n      \"type\": \"Action.OpenUrl\",\n      \"title\": \"More Info\",\n      \"url\": \"https://www.youtube.com/watch?v=dQw4w9WgXcQ\"\n    }\n  ]\n}} /\u003e\n```\n\n### Sample Card Payload\n```json\n{\n    \"type\": \"AdaptiveCard\",\n    \"version\": \"1.0\",\n    \"body\": [\n        {\n            \"type\": \"TextBlock\",\n            \"text\": \"Here is a ninja cat\"\n        },\n        {\n            \"type\": \"Image\",\n            \"url\": \"http://adaptivecards.io/content/cats/1.png\"\n        }\n    ]\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgatewayapps%2Freact-adaptivecards","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgatewayapps%2Freact-adaptivecards","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgatewayapps%2Freact-adaptivecards/lists"}