# 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](https://developer.mozilla.org/fr/docs/Web/API/Window/postMessage), 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](https://developer.mozilla.org/fr/docs/Web/API/Window/postMessage). The RSC will call the commitCallback function props back, with the received state as parameter.


## Install

```bash
yarn add @upandgo/react-scorm-container
```

## Usage

```tsx
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>
    )
  }
}
```

## License

MIT © [Sangrene](https://github.com/Sangrene)