loom-browser 0.0.3 → 0.0.4

package/README.md

@@ -66,13 +66,14 @@ Drop in a full browser shell with navbar, locus search, zoom controls, and expor
 ```ts
 import { createShell } from 'loom-browser'
 
+// 5 lines to a fully working genome browser with ruler + gene tracks
 const shell = createShell(document.getElementById('container')!, {
   locus: { chr: 'chr17', start: 7_668_000, end: 7_688_000 },
-  shellTheme: 'modern', // 'classic' | 'modern' | 'dark'
+  shellTheme: 'dark', // 'classic' | 'modern' | 'dark' — auto-maps render theme
 })
 
-shell.browser.addRuler()
-shell.browser.addGeneTrack()
+// Add more tracks as needed
+shell.browser.addWigTrack('https://example.com/signal.bigWig')
 ```
 
 Or use the custom element directly:
@@ -81,6 +82,30 @@ Or use the custom element directly:
 <loom-browser theme="modern" id="my-browser"></loom-browser>
 ```
 
+### React
+
+Declarative React bindings are available via `loom-browser/react`. Tracks are JSX children that auto-add on mount and auto-remove on unmount. React 18+ is required but optional — if you don't import from `loom-browser/react`, no React code is included.
+
+```tsx
+import { LoomBrowser, RulerTrack, WigTrack, GeneTrack } from 'loom-browser/react'
+import { modernRenderTheme } from 'loom-browser'
+
+function App() {
+  const [locus, setLocus] = useState({ chr: 'chr17', start: 7_668_000, end: 7_688_000 })
+
+  return (
+    <LoomBrowser locus={locus} onLocusChange={setLocus} theme={modernRenderTheme}
+      style={{ height: 400 }}>
+      <RulerTrack />
+      <WigTrack url="https://example.com/signal.bw" config={{ color: '#4A90D9' }} />
+      <GeneTrack />
+    </LoomBrowser>
+  )
+}
+```
+
+Hooks: `useGenomeBrowser()`, `useBrowserEvent(event, handler)`, `useLocus()`.
+
 ## Track Types
 
 | Type | Method | Formats | Description |