https://github.com/gosling-lang/gosling-react-example
Template and examples for using Gosling.js and its API in React App
https://github.com/gosling-lang/gosling-react-example
hidivelab
Last synced: 5 months ago
JSON representation
Template and examples for using Gosling.js and its API in React App
- Host: GitHub
- URL: https://github.com/gosling-lang/gosling-react-example
- Owner: gosling-lang
- Created: 2021-02-20T00:22:00.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-06-26T16:25:23.000Z (12 months ago)
- Last Synced: 2025-07-23T12:24:44.123Z (11 months ago)
- Topics: hidivelab
- Language: JavaScript
- Homepage: https://gosling-lang.github.io/gosling-react-example/.
- Size: 37.7 MB
- Stars: 10
- Watchers: 3
- Forks: 16
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Gosling React Example
This repository describes a way to use [Gosling.js](https://github.com/gosling-lang/gosling.js) along with [React](https://reactjs.org) and [Vite](https://vitejs.dev/).
The repository includes examples related to adding Gosling visualization to webpages and using Gosling JavaScript API functions (e.g., looking up clicked genomic region and its raw data, zooming to a certain gene of interest using a text input).
All examples can be found as separate files under a [src/example](/src/example/) folder.
You can find the online demo at https://gosling-lang.github.io/gosling-react-example/.
## Using This Repository
Fork this repository, and then clone it.
```sh
git clone https://github.com/[YOUR GITHUB ID]/gosling-react-example.git
cd gosling-react-example
```
Install all dependencies:
```sh
pnpm install
```
Run the demo in your browser:
```sh
pnpm start
```
## Using Gosling Component
Use the Gosling.js's react component to visualize your data:
```js
import { GoslingComponent } from "gosling.js";
function App() {
return (
);
}
```
## Gosling API
To use the Gosling API, you need to create a [Ref](https://reactjs.org/docs/refs-and-the-dom.html) that stores a reference to the GoslingComponent.
```javascript
const gosRef = React.useRef(null)
if (gosRef.current) {
// then you can use any Gosling API you want
gosRef.current.api.exportPdf();
}
```
Below is an example
```javascript
import React, { useRef, useEffect } from "react";
import { GoslingComponent} from 'gosling.js';
function app(){
const gosRef = useRef(null);
useEffect(() => {
if (gosRef.current) {
gosRef.current.api.subscribe('click', (type, eventData) => {
// print raw data that corresponds to the clicked mark
console.warn(type, eventData.data);
})
}
return ()=>{
// remember to unsubscribe events
gosRef.current?.api.unsubscribe('click');
}
}, [gosRef.current]);
return (
gosRef.current?.api.exportPdf()}>
Export PDF
);
}
```
Please refer to [Gosling documentation](http://gosling-lang.org/docs/js-api) for a complete list of Gosling API.
## Using Create React App
Install a react application using [Create React App](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app).
```
npx create-react-app my-app
cd my-app
```
Install `gosling.js` and its dependent libraries:
```sh
npm add gosling.js higlass pixi.js
```
Add the following stylesheet to `public/index.html`:
```html
```
## Resource
- Gosling Editor ([demo](https://gosling.js.org/), [code](https://github.com/gosling-lang/gosling.js)) is also based on ``