@upandgo/react-scorm-container NPM

react-scorm-container

RSC (React-Scorm-Container) doesn't work only by itself, but should be use in parallel with SIB (Scorm-Iframe-Bridge). RSC host an iframe pointing to the bridge, and add the module url to an id url parameter.

Both the bridge and the module should be on the same domain. It means that bridgeUrl and moduleUrl should point to the same domain.

When the iframe has loaded, RSC send an initialization message, using the post messaging api, to the SIB. This initialization send the initialState to the SIB. On each commit, the SIB will modify its local state and send this new state to the RSC using the post messaging api. The RSC will call the commitCallback function props back, with the received state as parameter.

Install

yarn add @upandgo/react-scorm-container

Usage

import React, { Component } from 'react'

import ExampleComponent from 'react-scorm-container'

export default class App extends Component {

  handleCommit = (state, eventList) => {
    console.log(state);
    console.log(eventList);
  }

  render() {
    return (
      <div style={{ minHeight: "100vh" }}>
        <ExampleComponent
          bridgeUrl="http://scorm-modules.s3-website-eu-west-1.amazonaws.com"
          manifestUrl='http://scorm-modules.s3-website-eu-west-1.amazonaws.com/1380de9b-664d-4b20-a2c3-4a966bcaec26/imsmanifest.xml'
          initialState={{}}
          commitCallback={this.handleCommit}
        />
      </div>
    )
  }
}