adaptivecards-react

React.js Adaptive Cards component

Install and import the module

Node

npm install react adaptivecards-react --save

// Import the module:
import * as AdaptiveCard from "adaptivecards-react";

// OR require it:
var AdaptiveCard = require("adaptivecards-react");

import { AdaptiveCard } from "adaptivecards-react";

Usage

• Basic usage:

var card = {
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Here is a ninja cat"
        },
        {
            "type": "TextBlock",
            "text": "Here is another ninja cat"
        },
        {
            "type": "Image",
            "url": "http://adaptivecards.io/content/cats/1.png"
        }
    ]
};

var hostConfig = {
    fontFamily: "Segoe UI, Helvetica Neue, sans-serif"
};

<AdaptiveCard payload={card} hostConfig={hostConfig} />

• react context:

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

import {ProvidesHostConfigContext, AdaptiveCardUsingHostConfigContext } from "adaptivecards-react";

      <ProvidesHostConfigContext hostConfig={hostConfig} >
        <...>
            <AdaptiveCardUsingHostConfigContext payload={card}/>
        </...>    
      </ProvidesHostConfigContext>