Skip to main content

Embedded components

Our embedded components allow you to use individual JBrowse views in your application

JBrowse React Linear Genome View

This component consists of a single JBrowse 2 linear view.

Here is a table of different usages of the @jbrowse/react-linear-genome-view using different bundlers

BundlerDemoSource codeNote
create-react-app v4demosource code (download)no polyfills needed in create-react-app v4. on newer versions of node, you can need to use export NODE_OPTIONS=--openssl-legacy-provider before building cra4 apps
create-react-app v5demosource code (download)for create-react-app v5, we use craco to update the webpack config to polyfill some node modules. This demo also uses webworkers, which is a unique ability with webpack 5. See https://jbrowse.org/storybook/lgv/main/?path=/story/linear-view--with-web-worker for details
vitedemosource code (download)for vite, we use rollup to polyfill some node polyfills similar to craco in create-react-app v5. note, may not work with newly released vite 3.x, works in dev but fails in production so this example uses vite 2.x
next.jsdemosource code (download)uses next.js 12. Also see next.config.js to update basePath as needed
vanilla jsdemosource code (download)uses a script tag to include a UMD bundle, and doesn't require any transpilation or bundling. see also dev tutorial here https://jbrowse.org/jb2/docs/tutorials/embed_linear_genome_view/01_introduction/

JBrowse React Circular Genome View

This component consists of a single JBrowse 2 circular view.

Here is a table of different usages of the @jbrowse/react-circular-genome-view using different bundlers

SyntaxDemoSource codeNote
create-react-app v4demosource code (download)no polyfills needed in create-react-app v4. on newer versions of node, you can need to use export NODE_OPTIONS=--openssl-legacy-provider before building cra4 apps
create-react-app v5demosource code (download)for create-react-app v5, we use craco to update the webpack config to polyfill some node modules
vanilla jsdemosource code (download)uses a script tag to include a UMD bundle, and doesn't require any transpilation or bundling