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.
- @jbrowse/react-linear-genome-view linear genome view React component on NPM
- Storybook - docs for the linear genome view React component
Here is a table of different usages of the @jbrowse/react-linear-genome-view
using different bundlers
| Bundler | Demo | Source code | Note |
|---|---|---|---|
| create-react-app v4 | demo | source 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 v5 | demo | source 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 |
| vite | demo | source 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.js | demo | source code (download) | uses next.js 12. Also see next.config.js to update basePath as needed |
| vanilla js | demo | source 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.
- @jbrowse/react-circular-genome-view circular genome view React component on NPM
- Storybook - docs for the circular genome view React component
Here is a table of different usages of the
@jbrowse/react-circular-genome-view using different bundlers
| Syntax | Demo | Source code | Note |
|---|---|---|---|
| create-react-app v4 | demo | source 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 v5 | demo | source code (download) | for create-react-app v5, we use craco to update the webpack config to polyfill some node modules |
| vanilla js | demo | source code (download) | uses a script tag to include a UMD bundle, and doesn't require any transpilation or bundling |