diff --git a/docs/latest/deployment/recipes/embedded-viewer.md b/docs/latest/deployment/recipes/embedded-viewer.md index 0cf8a8ce3..86aea531b 100644 --- a/docs/latest/deployment/recipes/embedded-viewer.md +++ b/docs/latest/deployment/recipes/embedded-viewer.md @@ -126,12 +126,39 @@ 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? +If you are installing OHIF viewer inside another react app, you may use `installViewer` as follows: +``` +import { installViewer } from '@ohif/viewer' + +const ohifViewerConfig = window.config // or set it here +const containerId = 'ohif' +const componentRenderedOrUpdatedCallback = function() { + console.log('OHIF Viewer rendered/updated'); +}; + +componentDidMount() { + installViewer( + ohifViewerConfig, + containerId, + componentRenderedOrUpdatedCallback + ); +} + +render () { + ... + //you can render in any element you wish + +} + +``` + `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. +