Narcissistic Pickle Meister

    react-sequence-viewer

    0.2.3 • Public • Published

    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

    Install

    npm i react-sequence-viewer

    Homepage

    http:

    DownloadsWeekly Downloads

    12

    Version

    0.2.3

    License

    MIT

    Unpacked Size

    1.03 MB

    Total Files

    12

    Last publish

    Collaborators

    • jogoodma