docs: updated embedded-viewer recipe
This commit is contained in:
parent
e8938111d5
commit
1b1ff8068d
@ -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
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user