How to use xfc - 10 common examples

// Example files
import BasicConsumer from './consumers/BasicConsumer';
import BasicConsumerSrc from '!raw-loader!./consumers/BasicConsumer';
import CustomEventConsumer from './consumers/CustomEventConsumer';
import CustomEventConsumerSrc from '!raw-loader!./consumers/CustomEventConsumer';
import CustomEventsConsumer from './consumers/CustomEventsConsumer';
import CustomEventsConsumerSrc from '!raw-loader!./consumers/CustomEventsConsumer';
import DataStatusConsumer from './consumers/DataStatusConsumer';
import DataStatusConsumerSrc from '!raw-loader!./consumers/DataStatusConsumer';
import FillConsumer from './consumers/FillConsumer';
import FillConsumerSrc from '!raw-loader!./consumers/FillConsumer';
import OnReadyConsumer from './consumers/OnReadyConsumer';
import OnReadyConsumerSrc from '!raw-loader!./consumers/OnReadyConsumer';

Consumer.init();

const DocPage = () => (
  ,
        source: BasicConsumerSrc,
      },
      {
        title: 'Filled Embedded Content',
        example: ,
        source: FillConsumerSrc,

// Example files
import BasicConsumer from '../example/BasicConsumer';
import BasicConsumerSrc from '!raw-loader!../../../../src/terra-dev-site/doc/example/BasicConsumer';
import CustomEventConsumer from '../example/CustomEventConsumer';
import CustomEventConsumerSrc from '!raw-loader!../../../../src/terra-dev-site/doc/example/CustomEventConsumer';
import CustomEventsConsumer from '../example/CustomEventsConsumer';
import CustomEventsConsumerSrc from '!raw-loader!../../../../src/terra-dev-site/doc/example/CustomEventsConsumer';
import DataStatusConsumer from '../example/DataStatusConsumer';
import DataStatusConsumerSrc from '!raw-loader!../../../../src/terra-dev-site/doc/example/DataStatusConsumer';
import FillConsumer from '../example/FillConsumer';
import FillConsumerSrc from '!raw-loader!../../../../src/terra-dev-site/doc/example/FillConsumer';
import OnReadyConsumer from '../example/OnReadyConsumer';
import OnReadyConsumerSrc from '!raw-loader!../../../../src/terra-dev-site/doc/example/OnReadyConsumer';
/* eslint-enable import/no-webpack-loader-syntax, import/first, import/extensions, import/no-unresolved, import/no-duplicates */

Consumer.init();

const DocPage = () => (
  ,
        source: BasicConsumerSrc,
      },
      {
        title: 'Filled Embedded Content',
        example: ,
        source: FillConsumerSrc,

import { name } from '../../../../package.json';

// Component Source
import EmbeddedContentConsumerSrc from '!raw-loader!../../../../src/EmbeddedContentConsumer.jsx';

// Example files
import BasicConsumer from '../example/BasicConsumer';
import BasicConsumerSrc from '!raw-loader!../../../../src/terra-dev-site/doc/example/BasicConsumer';
import CustomEventConsumer from '../example/CustomEventConsumer';
import CustomEventConsumerSrc from '!raw-loader!../../../../src/terra-dev-site/doc/example/CustomEventConsumer';
import CustomEventsConsumer from '../example/CustomEventsConsumer';
import CustomEventsConsumerSrc from '!raw-loader!../../../../src/terra-dev-site/doc/example/CustomEventsConsumer';
import DataStatusConsumer from '../example/DataStatusConsumer';
import DataStatusConsumerSrc from '!raw-loader!../../../../src/terra-dev-site/doc/example/DataStatusConsumer';

Consumer.init();

const DocPage = () => (
  ,
        source: BasicConsumerSrc,
      },
      {
        title: 'Embedded Content Consumer Lifecycle Statuses',
        example: ,
        source: DataStatusConsumerSrc,

componentDidMount() {
    // Mount the provided source as the application into the content wrapper.
    this.xfcFrame = Consumer.mount(this.embeddedContentWrapper, this.props.src, this.props.options);

    // Notify that the consumer frame has mounted.
    if (this.props.onMount) {
      this.props.onMount(this.xfcFrame);
    }

    // Attach the event handlers to the xfc frame.
    this.addEventListener('xfc.launched', this.props.onLaunch);
    this.addEventListener('xfc.authorized', this.props.onAuthorize);

    // Attach custom event handlers to the xfc frame.
    this.addEventListeners(this.props.eventHandlers);
  }

import React from 'react';
import { Consumer } from 'xfc';
import EmbeddedContentConsumer from 'terra-embedded-content-consumer';

Consumer.init();

const createListItem = (itemName) => {
  const listItem = document.createElement('li');
  listItem.setAttribute('id', itemName);
  listItem.appendChild(document.createTextNode(itemName));

  return listItem;
};

const appendLifeCycleStatuses = (statuses) => {
  const frames = document.getElementsByTagName('iframe');
  for (let frameIndex = 0; frameIndex < frames.length; frameIndex += 1) {
    const frame = frames[frameIndex];
    const statusList = frame.contentWindow.document.getElementById('DataStatus-LifeCycleStatuses');
    if (statusList) {
      statuses.forEach((status) => { statusList.appendChild(createListItem(status)); });

init: () => {
    Provider.init({
      acls: ['https://embedded.cerner.com',
        'https://embedded.sandboxcerner.com', 'https://embedded.devcerner.com'],
    });
  },
  /**

onClickB() {
    Provider.trigger('EventB');
  }

onClick() {
    Provider.trigger('EventA');
  }

onClickA() {
    Provider.trigger('EventA');
  }

addEventListener(eventName) {
    Provider.on(eventName, (event) => {
      document.getElementById('embedded-content-consumer-reply').innerHTML = `embedded-content-consumer reply: ${JSON.stringify(event)}`;
    });
  }