1.0.2 • Published 6 years ago

handy-highlight v1.0.2

Weekly downloads
2
License
ISC
Repository
github
Last release
6 years ago

Handy-Highlight

A very handy tool for highlighting the text & having fun with it - Inspired by Medium. Demo below!!

Quick links

  1. Usage
  2. Demo
  3. API

Usage

  1. Install with npm or Yarn.

    npm install handy-highlight

    or

    yarn add handy-highlight
  2. Add these divs to your markup.

    <div id="cal1">&nbsp;</div>
    <div id="cal2">&nbsp;</div>
    <div id="handy-tooltip"></div>
  3. Copy everything of /highlight.css into your stylesheet.

  4. Here comes the fun part. Should be used on mouseup function on window object.

    import Highlight from 'handy-highlight'
    window.onmouseup = function(){
        Highlight({
            onclick: function(){ /*YOUR STUFF HERE*/ },   // is executed when div is clicked
            text: "<b>Hello, World</b>"   // Ignore this property if you want div's text to be highlighted text
        });
    }

Demo

Visit this link for the demo!!

API

Highlight(options:Object)
options = {
    extraTop:Number,
    extraLeft:Number,
    text:String,
    onclick:Function
}

Thnx for reading!!