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
}

extraTop:

Add some extra top to the div.

extraLeft:

Add some extra left to the div.

text:

Text of the div. Ignore this property if you want div's text to be the highlighted text.

onclick:

Function to be executed when clicked on the div.

Thnx for reading!!