A very handy tool to highlight the text & do fun with it - Inspired by Medium. Demo below!! 🎯🎯🎯
A very handy tool for highlighting the text & having fun with it - Inspired by Medium. Demo below!!
Install with npm
or Yarn
.
npm install handy-highlight
or
yarn add handy-highlight
Add these divs
to your markup.
<div id="cal1"> </div>
<div id="cal2"> </div>
<div id="handy-tooltip"></div>
Copy everything of /highlight.css
into your stylesheet.
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
});
}
Visit this link for the demo!!
Highlight(options:Object)
options = {
extraTop:Number,
extraLeft:Number,
text:String,
onclick:Function
}
Thnx for reading!!