Functions & entry v1.0.60¶

Top-level exported entry functions, React components, preset configs, and the version constant.

mountBrowser¶

function

function mountBrowser(containerId: string): BrowserHandle

Mounts the "full RBrowser (with toolbar)" into the specified DOM container and returns a { renderer, unmount } handle. React is bundled internally, so callers do not need to install React.

Parameter	Type	Required	Description
`containerId`	`string`	✓	The `id` of the target DOM element. Throws an `Error` if the element does not exist.

Returns: BrowserHandle — { renderer, unmount }. renderer is the synchronously available renderer instance (exposes channelManager / referenceManager / locusManager / searchManager / highlightManager / headerPanelManager and every renderer method); unmount() tears down the React root mount and releases all WebGL resources.

import { mountBrowser } from "@rbrowser/main";

const { renderer, unmount } = mountBrowser("root");

renderer.locusManager;     // current locus + navigation
renderer.channelManager;   // tracks
renderer.referenceManager; // genome references

// Unmount (call on route change / component teardown)
unmount();

throws: throws Error: [RBrowser] Container element #<id> not found in the DOM. when document.getElementById(containerId) returns null.

BrowserHandle¶

type

interface BrowserHandle {
  renderer: TranscriptBrowserRenderer; // synchronously available
  unmount: () => void;                 // tear down
}

Behavior change in v1.0.60 (breaking)

As of v1.0.60 mountBrowser returns a { renderer, unmount } handle; earlier versions returned only the unmount function and did not expose the renderer instance. Update const unmount = mountBrowser(id) to const { unmount } = mountBrowser(id).

Internally mountBrowser mounts React synchronously via flushSync and captures the instance as MainView creates it, so renderer is ready on return.

App¶

component

import { App } from "@rbrowser/main";

The React component version of the "full browser". The internal implementation of mountBrowser() simply renders this component into a React root. In projects that already have a React tree, you can use it directly:

import { App } from "@rbrowser/main";

function MyPage() {
  return (
    <div style={{ width: "100%", height: "100vh" }}>
      <App />
    </div>
  );
}

Peer dependency: React 18+ or 19

When using the <App /> component directly, your React version must be compatible with RBrowser. mountBrowser() is not subject to this constraint (React is bundled internally).

defaultConfig¶

preset

import { defaultConfig } from "@rbrowser/main";

A complete "default demo config" that includes a set of preset channels, default axis / grid config, the human GRCh38 reference, default styles for each plot type, and more. The fastest way to verify that the renderer works:

const renderer = new TranscriptBrowserRenderer({
  ...defaultConfig,
  renderer: { ...defaultConfig.renderer, containerId: "root" },
});
renderer.mount();

Its type is DefaultConfig (i.e. typeof defaultConfig, an extension of ITRConfig that additionally exposes buildin).

headerBase¶

preset

import { headerBase } from "@rbrowser/main";

A predefined array of RNA annotation channels (IChannel[]) — the built-in Transcript Structure / Exon / Junction tracks, plus a few DNA Annotation (cCRE, peak, BED) example tracks. Commonly used for the "base layout + custom tracks" combination:

const channels = [
  ...headerBase,
  { name: "My BigWig", plot: "bar", data: { method: "remote", format: "bigwig", url: "..." } },
];

VERSION¶

const

const VERSION: string

The package version string. Currently: "1.0.60".

import { VERSION } from "@rbrowser/main";
console.log(VERSION); // "1.0.60"