docs: updated embedded-viewer recipe

This commit is contained in:
dannyrb 2019-09-09 22:33:33 -04:00
parent e8938111d5
commit 1b1ff8068d

View File

@ -16,16 +16,6 @@ include tags. Here's how it works:
<code>Google Font: Roboto</code> <code>Google Font: Roboto</code>
</a> </a>
</li> </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> <li>
<a href="https://unpkg.com/@ohif/viewer"> <a href="https://unpkg.com/@ohif/viewer">
<code>@ohif/viewer@latest</code> <code>@ohif/viewer@latest</code>
@ -65,10 +55,15 @@ window.config = {
```js ```js
// Made available by the `@ohif/viewer` script included in step 1 // Made available by the `@ohif/viewer` script included in step 1
var Viewer = window.OHIFStandaloneViewer.App; var containerId = 'id-of-div-to-render-component-to';
var app = React.createElement(Viewer, window.config, null); var componentRenderedOrUpdatedCallback = function() {
console.log('OHIF Viewer rendered/updated');
ReactDOM.render(app, document.getElementById('ohif-viewer-target')); };
window.OHIFViewer.installViewer(
window.config,
containerId,
componentRenderedOrUpdatedCallback
);
``` ```
#### Tips & Tricks #### 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 This should produce the expected result while also protecting your page from any
globally defined styles/scripts. 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 LINKS
--> -->
[code-sandbox]: https://codesandbox.io/s/ohif-viewer-script-tag-usage-b3st9 [code-sandbox]: https://codesandbox.io/s/ohif-script-tag-v103-iniiu