{"_id":"@alexisab/react-scorm-provider","_rev":"2-dcb1bdb1abe713a358b6d56d0a80c869","name":"@alexisab/react-scorm-provider","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.3":{"name":"@alexisab/react-scorm-provider","version":"0.1.3","description":"Components to easily enable SCORM API communication in React projects.","main":"lib/index.js","scripts":{"dev":"concurrently \"npm run lib:watch\" \"npm run docs\"","lib":"babel src/lib -d lib --copy-files","lib:watch":"babel src/lib -w -d lib --copy-files","docs":"webpack-dev-server --mode development","docs:prod":"webpack --mode production","prepublish":"npm run lib"},"keywords":["react","scorm","scorm1.2","scorm2004","lms","sco","elearning","e-learning","wrapper","api"],"license":"MIT","peerDependencies":{"react":"^16.2.0","react-dom":"^16.2.0"},"dependencies":{"pipwerks-scorm-api-wrapper":"^0.1.2"},"devDependencies":{"@babel/cli":"^7.0.0-beta.46","@babel/core":"^7.0.0-beta.46","@babel/plugin-proposal-class-properties":"^7.0.0-beta.46","@babel/plugin-proposal-object-rest-spread":"^7.0.0-beta.46","@babel/preset-env":"^7.0.0-beta.46","@babel/preset-react":"^7.0.0-beta.46","babel-loader":"^8.0.0-beta.0","concurrently":"^3.5.1","css-loader":"^0.28.11","file-loader":"^1.1.11","html-webpack-plugin":"^3.2.0","prop-types":"^15.6.2","react":"^16.3.2","react-dom":"^16.3.2","style-loader":"^0.21.0","webpack":"^4.6.0","webpack-cli":"^2.0.15","webpack-dev-server":"^3.1.14"},"author":{"name":"Jay Karlsven","email":"j.karlsven@gmail.com"},"homepage":"https://github.com/JayV30/react-scorm-provider","repository":{"type":"git","url":"git+ssh://git@github.com/JayV30/react-scorm-provider.git"},"gitHead":"fcb7c2c772925670fe0aae97612be7fef45e7c22","bugs":{"url":"https://github.com/JayV30/react-scorm-provider/issues"},"_id":"@alexisab/react-scorm-provider@0.1.3","_nodeVersion":"10.9.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-KS1sE+XjvVRBWSyM14kybaz0vA4uqCCw9B3+lj88g8WFQCJ2AMYNes9nvrKs1mbfGEYFyRFzee1Anz8zP4y57A==","shasum":"2741222b0223f4b646e03e8d0979f2bc0a6030e9","tarball":"https://registry.npmjs.org/@alexisab/react-scorm-provider/-/react-scorm-provider-0.1.3.tgz","fileCount":7,"unpackedSize":22950,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWA16CRA9TVsSAnZWagAAdUkQAInug2gw/pb2sGOTFBAR\nNnsD4WEG16JdPfzJ3aqGnug6FVYiA158Fv73g2J7HDIUsnQSGTlzOaWB81zD\nm9bJuNu98LSt3hYMtPRoBGo5s388HRXKn4zGl+hv58TQo5ru0r2RFho4Gk0M\nVWrWpifWrERpw8mZvpRF22a6RFioIfEazEPL7mCU7dnYmuRtGbph7GVwvpzC\nhF1mWIHuo/6xISk5njKsPXcFOYlQDFKX/Y8Z6/kA6WjYjLW3oO9BdB2r2MKv\n7LoZVLeVsxTAKHqT60eRtShhyihFpz+fg6BIvfcxPcZrbFs5p3XckVbubKqu\n1j14vHvz/II8k+S0U1bgEydC3XtGpaqf8sHc03dTcjlqjyXQCeD1a9nwnFcK\nCIyCUqCaZs+KlphzWfAdOmU5Glmz/TIz9xE/zlFrrC0gkboWGmbcWg85esJt\nFuVRf/OujPX4owxtiaRNEE0jQPPsQ3OBITTX275U3mTFxmHCOr+jdQ7b7j8U\n6n2rdBhHRnCz5kMNLwA0G/fxA8JWfzgkldqAU9NeVaduCn0q7CX6rxeCA2yq\nJ9HHsbiE2/rtt7u2cu2b1ePkh+69DpmMIZs5ERejHokqfw0Vg2B+DWpA71+o\nzWgkvJUoNTLUzdufzT9SMuctZzsR5oQcZGRi4SsZgtQUnFX5QXJzQAr/b0em\nsCqF\r\n=t5x2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDAnEKHuX8vJ++w5wHdUOREEgU0swr9hiktDAgFYCKzEAiBWQj+LDZKlmxqtJ9h71XIJuDbH+YnZyixPCmfIxdwLsw=="}]},"maintainers":[{"name":"alexisab","email":"alexis.ablain@gmail.com"}],"_npmUser":{"name":"alexisab","email":"alexis.ablain@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-scorm-provider_0.1.3_1549274489656_0.6102754530267642"},"_hasShrinkwrap":false},"0.2.0":{"name":"@alexisab/react-scorm-provider","version":"0.2.0","description":"Components to easily enable SCORM API communication in React projects.","main":"lib/index.js","scripts":{"dev":"concurrently \"npm run lib:watch\" \"npm run docs\"","lib":"babel src/lib -d lib --copy-files","lib:watch":"babel src/lib -w -d lib --copy-files","docs":"webpack-dev-server --mode development","docs:prod":"webpack --mode production","prepublish":"npm run lib"},"keywords":["react","scorm","scorm1.2","scorm2004","lms","sco","elearning","e-learning","wrapper","api"],"license":"MIT","peerDependencies":{"react":"^16.2.0","react-dom":"^16.2.0"},"dependencies":{"pipwerks-scorm-api-wrapper":"^0.1.2"},"devDependencies":{"@babel/cli":"^7.0.0-beta.46","@babel/core":"^7.0.0-beta.46","@babel/plugin-proposal-class-properties":"^7.0.0-beta.46","@babel/plugin-proposal-object-rest-spread":"^7.0.0-beta.46","@babel/preset-env":"^7.0.0-beta.46","@babel/preset-react":"^7.0.0-beta.46","babel-loader":"^8.0.0-beta.0","concurrently":"^3.5.1","css-loader":"^0.28.11","file-loader":"^1.1.11","html-webpack-plugin":"^3.2.0","prop-types":"^15.6.2","react":"^16.3.2","react-dom":"^16.3.2","style-loader":"^0.21.0","webpack":"^4.6.0","webpack-cli":"^2.0.15","webpack-dev-server":"^3.1.14"},"author":{"name":"Jay Karlsven","email":"j.karlsven@gmail.com"},"homepage":"https://github.com/JayV30/react-scorm-provider","repository":{"type":"git","url":"git+ssh://git@github.com/JayV30/react-scorm-provider.git"},"gitHead":"ed6161f762492a2cbce563fad8daf5f6c53f3ec8","bugs":{"url":"https://github.com/JayV30/react-scorm-provider/issues"},"_id":"@alexisab/react-scorm-provider@0.2.0","_nodeVersion":"10.9.0","_npmVersion":"6.8.0","dist":{"integrity":"sha512-e/5FLNn8c9LtBAR9K9yKzVuXlOpLU8Wu4juZ42/SjtWNs070goItvzx0l74ayAiIu1VLxJVXR85VLa7TYmaH1w==","shasum":"4e7b669b088503513e911988beca63b5857e65ce","tarball":"https://registry.npmjs.org/@alexisab/react-scorm-provider/-/react-scorm-provider-0.2.0.tgz","fileCount":7,"unpackedSize":23215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJceAUBCRA9TVsSAnZWagAAZ9cP/3nQ9L5eLOWPtnIjV5Ci\nHUUe5e6kzT750ovnMKXE7DMTPwrgkHd1gxV1SYeL/MuNP6daa5paAkQ2AcOU\nKchLBeJQrIrRGop6sAqaKKe1H6yfb8dA94Im1HGlsI0BsMUrN19hsP3dItUx\n8wc4qAxIO0ZvpdQz2iR29tNVl1CtNCVq47OgoG4/4FlgbUiMmONFFIsrAVVQ\nuJWwZg+qvztK2Pr9RTmi3U3UiqQl6rr3RrfKD8+mSktpWJSaF6VaiCv2q4Na\n2Wmlfc6bNanpme6AXknN6DYsgnPnYJbCEMYWIeVCq79PzCK9Gpcc+k4qYkH1\nB+XgH43wdPRjxBhiNFRd4YCiG9JzyGQd/mh9U+mg2a5HszSYK2fJQYZZGh6B\nxZA6DItuEbFAezUBKOnfFzGa0m3P2KY2p/TuAwwGjVZnQv5VVAgoatLePEI9\ne1TZKq43v/ZhbY6KIMQEPX3snBp1tuvXXZp/R9096RZ97RSc7jOiJw0lQj8W\n6buzdHTxPXT+qEMlVqejgm9380AuBfwPDjD5v5Hhyg4mIQsOEeOxI2asArGM\nfDBBEABvj1gHTJu0IrW8MMnSiozHFeHBnbb6crOVctRWnC/6fI8E1sNXbfC4\nk4XeG9VnIpsWXzYEoF32+3nHuP9j6bbcbY/ybIxjZXT2QLaSbIf2RzEf498G\n1TdX\r\n=kx69\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqRNLuToadoug2ejkOS1aWcHsDQ7r7BAzmwtBfGof4lAIhAOB6eOSitytZ7mYDivohqcA0Ftc/wG65IND20WTDQP2x"}]},"maintainers":[{"name":"alexisab","email":"alexis.ablain@gmail.com"}],"_npmUser":{"name":"alexisab","email":"alexis.ablain@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-scorm-provider_0.2.0_1551369472989_0.10666004723912614"},"_hasShrinkwrap":false}},"time":{"created":"2019-02-04T10:01:29.417Z","0.1.3":"2019-02-04T10:01:29.766Z","modified":"2022-04-04T12:40:15.430Z","0.2.0":"2019-02-28T15:57:53.147Z"},"maintainers":[{"name":"alexisab","email":"alexis.ablain@gmail.com"}],"description":"Components to easily enable SCORM API communication in React projects.","homepage":"https://github.com/JayV30/react-scorm-provider","keywords":["react","scorm","scorm1.2","scorm2004","lms","sco","elearning","e-learning","wrapper","api"],"repository":{"type":"git","url":"git+ssh://git@github.com/JayV30/react-scorm-provider.git"},"author":{"name":"Jay Karlsven","email":"j.karlsven@gmail.com"},"bugs":{"url":"https://github.com/JayV30/react-scorm-provider/issues"},"license":"MIT","readme":"# React SCORM Provider\n\n*WARNING: this project is still in active initial development and NOT for production use. I saw no adequate stand-alone SCORM React components so I decided to create one but it is not currently complete. It will work at the most basic level but it is currently untested and very simple. (Although using the get and set methods should cover nearly all uses - you just have to provide your own implementations)*\n\n---\n\n### Overview\n\nReact-scorm-provider (RSP) is a set of React Components that simplify the inclusion of the [SCORM API](https://scorm.com/scorm-explained/) into your React projects. It utilizes the great SCORM API wrapper from [pipwerks](https://github.com/pipwerks/scorm-api-wrapper). Use RSP to easily add SCORM capabilities to your learning modules, resources, games, or *any* web content you are creating with React.\n\nKeep in mind that this project does not include any kind of packaging or bundling for SCORM. It simply enables SCORM API calls inside your React code.\n\nThere are two major components of RSP, `ScormProvider` and `withScorm`.\n\n[View the live demo](https://jayv30.github.io/react-scorm-provider)\n\n---\n\n### ScormProvider Component\n\n``\n\nA wrapper component which should only be included ONCE in your React application component tree. It should be included as close to the root of your component tree as possible so that child components can take advantage of the `withScorm` Higher-Order Component. The `ScormProvider` component automatically establishes a connection to the SCORM API and retrieves some initial data from the LMS via the SCORM API. Once the `ScormProvider` Component is included, any other component that is a child of the `ScormProvider` can access the SCORM-related properties and functions via the `withScorm` Higher-Order Component described below.\n\nNote that the `ScormProvider` component itself does not pass props to any of its children. In order to access properties and methods of the `ScormProvider` component and make calls to the SCORM API, you *must* use the provided `withScorm` Higher-Order Component.\n\n#### Configuration\nThe ScormProvider Component accepts two optional configuration props:\n* **version:** (String) (Optional) Specify the SCORM API version, accepts \"1.2\" or \"2004\". This is completely optional and probably not needed, as the included pipwerks SCORM API wrapper will automatically attempt to connect to any SCORM API it can find. The version found will the be stored to the ScormProvider Component.\n* **debug:** (Boolean) (Optional) (Default: true) Specify if the SCORM API should be in debug mode and emit messages to the console.\n\nPutting it together:\n```\n// adding a ScormProvider\n\nimport React from 'react';\nimport ScormProvider from 'react-scorm-provider';\n\nconst App = () => {\n return (\n \n

Hello SCORM world!

\n

\n Although I can't yet access any props or methods from the ScormProvider (because I haven't yet included 'withScorm()'), a connection to the SCORM API will be made, initial values retrieved from the LMS via that API, and stored in the ScormProvider Component for use with 'withScorm()'.\n

\n \n );\n};\n\nexport default App;\n```\n\n---\n\n### withScorm Higher-Order Component\n\n`const YourEnhancedComponent = withScorm()(YourComponent)`\n\nThis Higher-Order Component provides access to a number of properties and functions of the `ScormProvider`. Use this to enhance your components with SCORM goodness! All exposed properties and functions are passed to your enhanced component via the 'sco' prop that is added to your component.\n\nThe 'sco' prop object contains the following properties:\n```\n// props.sco\n{\n // status of the connection to the SCORM API\n apiConnected: Bool,\n\n // cmi.core.student_name (SCORM 1.2) || cmi.learner_name (SCORM 2004)\n learnerName: String,\n\n // indication of course status\n completionStatus: String,\n\n // cmi.suspend_data parsed as an object (all suspend_data must be a JSON.stringify'd object for the suspend_data to work properly with RSP)\n suspendData: Object,\n\n // SCORM API version that is connected ('1.2' or '2004')\n scormVersion: String,\n\n // calling this function will update props.sco.suspendData with the current suspend_data from the LMS\n getSuspendData: Function (),\n\n // this function takes the required key and value arguments and merges them into the suspendData Object, overwriting the value if the key already exists. It then stringifies the object and saves it to the LMS as suspend_data\n setSuspendData: Function (key, val),\n\n // sends an updated course status to the LMS, accpets one of: \"passed\", \"completed\", \"failed\", \"incomplete\", \"browsed\", \"not attempted\"\n setStatus: Function (string),\n\n // sets a SCORM value, ex: props.sco.set('cmi.score.scaled', 100)\n set: Function (string, val),\n\n // gets a SCORM value from the LMS, ex: props.sco.get('cmi.score.scaled')\n get: Function (string)\n}\n```\n\nAll you have to do to provide the `sco` prop object to a component is wrap the component with `withScorm`. In order for `withScorm` to work, the component it is enhancing must be a child of `ScormProvider`.\n\nExample:\n```\n// enhancing a component and adding the sco object to its props\n\nimport React from 'react';\nimport { withScorm } from 'react-scorm-provider';\n\nconst StandardFunctionalComponent = (props) => {\n return (\n
\n

Welcome, {props.sco.learnerName}!

\n

Your course status is currently: {props.sco.completionStatus}

\n

Click the button below to complete the course!

\n \n
\n );\n};\n\nconst EnhancedComponent = withScorm()(StandardFunctionalComponent);\n\nexport default EnhancedComponent;\n```\n\n---\n\n### Full Example\n\n```\nimport React from 'react';\nimport ScormProvider, { withScorm } from 'react-scorm-provider';\n\nconst Learner = (props) => {\n return (\n
\n

Welcome, {props.sco.learnerName}!

\n

Your course status is currently: {props.sco.completionStatus}

\n

Click the button below to complete the course!

\n \n
\n )\n}\n\nconst ScoLearner = withScorm()(Learner);\n\n\nconst App = () => {\n return (\n \n

We've got a connection just by including ScormProvider!

\n

I'm a child with no access to the ScormProvider's props. But the ScoLearner component is enhanced with withScorm()!

\n \n \n );\n};\n\nexport default App;\n```\n","readmeFilename":"README.md"}