<Vitessce/> component can be used as one would any other React component.
This parameter takes a Vitessce view config as a JSON object. Please visit our view config documentation pages for more details.
The height in pixels that the Vitessce grid will fill on the page.
The theme, used for styling the components. By default,
|The light theme|
|The dark theme|
A callback for view config updates.
Whether to validate against the view config schema when publishing changes. Use for debugging purposes only, as this has a performance impact.
If you would like to use the
<Vitessce/> component in certain parts of your app without increasing the bundle size, one option is lazy loading.
React.lazy only works with default exports (rather than named exports), but we can work around this by adding a new file to wrap the
Vitessce named export as a default export.
Then in our app, we can dynamically import from this file in a call to
React.lazy and use the lazy-loaded component within
One disadvantage of React.lazy is that it works with the bundler (e.g. Webpack) to do "bundle splitting", i.e. the bundle will now be split into two files: the main bundle and the separate bundle for the lazy component.
This can be problematic if you are building a component (which wraps
<Vitessce/>) which you also intend to publish, as those users dependent on your app will not necessarily be aware that one of your component's dependencies is lazily loaded.
An alternative approach is to use a dynamic import to grab Vitessce from a CDN at run-time.
The dynamic-import-polyfill package can be used to do this.