From 1b1ff8068de18d73e080168cbe12078ba7b4ec9f Mon Sep 17 00:00:00 2001
From: dannyrb <danny.ri.brown@gmail.com>
Date: Mon, 9 Sep 2019 22:33:33 -0400
Subject: [PATCH] docs: updated embedded-viewer recipe

---
 .../deployment/recipes/embedded-viewer.md     | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/docs/latest/deployment/recipes/embedded-viewer.md b/docs/latest/deployment/recipes/embedded-viewer.md
index 3018d97c2..c94027f15 100644
--- a/docs/latest/deployment/recipes/embedded-viewer.md
+++ b/docs/latest/deployment/recipes/embedded-viewer.md
@@ -16,16 +16,6 @@ include tags. Here's how it works:
       <code>Google Font: Roboto</code>
     </a>
   </li>
-  <li>
-    <a href="https://unpkg.com/react@16/umd/react.production.min.js">
-      <code>react@16.8.6</code>
-    </a>
-  </li>
-  <li>
-    <a href="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js">
-      <code>react-dom@16.8.6</code>
-    </a>
-  </li>
   <li>
     <a href="https://unpkg.com/@ohif/viewer">
       <code>@ohif/viewer@latest</code>
@@ -65,10 +55,15 @@ window.config = {
 
 ```js
 // Made available by the `@ohif/viewer` script included in step 1
-var Viewer = window.OHIFStandaloneViewer.App;
-var app = React.createElement(Viewer, window.config, null);
-
-ReactDOM.render(app, document.getElementById('ohif-viewer-target'));
+var containerId = 'id-of-div-to-render-component-to';
+var componentRenderedOrUpdatedCallback = function() {
+  console.log('OHIF Viewer rendered/updated');
+};
+window.OHIFViewer.installViewer(
+  window.config,
+  containerId,
+  componentRenderedOrUpdatedCallback
+);
 ```
 
 #### Tips & Tricks
@@ -91,8 +86,17 @@ Good. Now `embed` that new page using an
 This should produce the expected result while also protecting your page from any
 globally defined styles/scripts.
 
+> We're trying to embed the OHIF Viewer into an existing React App, but seeing
+> react-dom and react conflicts. What can we do?
+
+`installViewer` is a convenience method that pulls in some dependencies that may
+not be compatible with existing `react` apps. `@ohif/viewer` also exports `App`
+which is a react component that takes the `configuration` outlined above as
+props. You can use it as a reusable component, and to avoid `react` version
+conflict issues.
+
 <!--
   LINKS
   -->
 
-[code-sandbox]: https://codesandbox.io/s/ohif-viewer-script-tag-usage-b3st9
+[code-sandbox]: https://codesandbox.io/s/ohif-script-tag-v103-iniiu