Skip to content

Instantly share code, notes, and snippets.

@vahedq

vahedq/ms-office-react.html

Last active June 11, 2018 21:47
Show Gist options
  • Save vahedq/defdba756a3daedbed8ff5725deedfb9 to your computer and use it in GitHub Desktop.
Save vahedq/defdba756a3daedbed8ff5725deedfb9 to your computer and use it in GitHub Desktop.
Download ZIP
React app with Office Javascript APIs.
Raw
ms-office-react.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<title>test page</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.5.4/react-dom.js"></script>
<!-- my react library -->
<script src="http://localhost:8081/dist/addin.js"></script>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js" type="text/javascript"></script>
</head>
<body>
<div>
<div id="addin-container"></div>
</div>
<script>
Office.initialize = function(reason) {
const Word = window.Word;
const Office = window.Office;
var container = document.getElementById('addin-container');
var addinProps = {
Office: Office,
Word: Word
}
var addinElement = React.createElement(WordAddinModule.WordAddin, addinProps);
var addin = ReactDOM.render(addinElement, container);
};
</script>
</body>
</html>
@shivasai09
Copy link

@vahedq what is WordAddinModule.WordAddin ?

@vahedq
Copy link
Author

vahedq commented Jun 11, 2018

@vahedq what is WordAddinModule.WordAddin ?

WordAddinModule.WordAddin would be the name of the react module you create for your add-in. Should replace with whatever you call your react module.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment