react-sequence-viewer
Description
A React wrapper around the BioJS sequence-viewer component.
Installation
npm install --save react-sequence-viewer
Dependencies
The following are dependencies required by the sequence-viewer
module that is wrapped
by this React component.
- jQuery
- Bootstrap CSS
You can either include these into your HTML page or add them to your own application build (see usage below).
Usage
The following code renders a sequence-viewer component in the HTML element with an ID of 'sequence-viewer1'.
ES6
import React from 'react';import ReactDOM from 'react-dom'; // Either uncomment these lines or pull// in jQuery and Bootstrap into the HTML page of your application.// The below requires that jQuery/Bootstrap be installed as a dependency// in your package.json file.//import jquery from 'jquery';//window.jQuery = jquery; //import 'bootstrap/dist/css/bootstrap.min.css'; import ReactSequenceViewer from 'react-sequence-viewer'; const mySeq = 'CAGTCGATCGTAGCTAGCTAGCTGATCGATGC'; ReactDOM;
import React from 'react';import ReactDOM from 'react-dom'; // Either uncomment these lines or pull// in jQuery and Bootstrap into the HTML page of your application.// The below requires that jQuery/Bootstrap be installed as a dependency// in your package.json file.//import jquery from 'jquery';//window.jQuery = jquery; //import 'bootstrap/dist/css/bootstrap.min.css'; import ReactSequenceViewer from 'react-sequence-viewer'; const mySeq = 'CAGTCGATCGTAGCTAGCTAGCTGATCGATGC';const options = badge: true search: false showLineNumbers: true title: "my sequence" toolbar: false; ReactDOM;
Properties / Options
Please see the Sequence Viewer documentation for more details on the options below.
Name | Description | Type | Required | Comment |
---|---|---|---|---|
className | HTML class name to apply to the Sequence Viewer div container | String | No | |
coverage | Advanced sequence hightlighting | Array[Objects] | No | Not compatible with selection |
id | The ID to use for the Sequence Viewer container element | String | No | |
legend | Adds a legend to the sequence | Array[Objects] | No | |
onMouseSelection | Event handler for sequence selection with the mouse | function | No | |
onSubpartSelected | Event handler for sequence selected via the search box | function | No | |
selection | A region to highlight | Array | No | Not compatible with coverage |
sequence | The sequence to render. | String | Yes |