React-block-highlight NPM

React Block Highlight

React Component to highlight any part of the containing block in rectangle.

Demo - https://react-block-highlight.netlify.com/

Installation

  npm i react-block-highlight --save

Usage

Importing component

import ReactBlockHighlight from "react-block-highlight";

Highlighting some part of block

Part of the block that requires to be highlighted can be passed in props with opacity and color

const highlightProps = { x, y, height, width, opacity, color };

<ReactBlockHighlight id="demo-space" {...highlightProps}>
  {
  <div>Hifglight some part of this div</div>
  }
</ReactBlockHighlight>

Props

Prop	Type	Description	Default Value
id	string	Unique id for the canvas element	"block-highlight-canvas"
x	number	x-coordinate of starting point	0
y	number	y-coordinate of starting point	0
height	number	Height of the area to be highlighted	20
width	number	Width of the area to be highlighted	250
opacity	number(0-1)	Opacity of the area to be highlighted	0.5
color	number	Color of the area to be highlighted in RGB	"#ffff00"