Skip to content

Latest commit

 

History

History
120 lines (88 loc) · 3.87 KB

README.md

File metadata and controls

120 lines (88 loc) · 3.87 KB
Raw

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).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>

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.render(
  <ReactSequenceViewer sequence={mySeq} />,
  document.getElementById('#sequence-viewer1')
);
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.render(
  <ReactSequenceViewer sequence={mySeq} {...options} />,
  document.getElementById('#sequence-viewer1')
);

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