A React component to highlight multiple targets by providing a canvas overlay.
Imagine that you need to focus on some component in your application to show it, with React Highlight Overlay it's possible and very easy!
React Highlight Overlay will create with <canvas> a dark transparent overlay on your application, and cut the pieces where you want to focus on.
Using React Highlight Overlay with a tour on a real application
React Highlight Overlay is available as an npm package
Install it
npm i react-highlight-overlay
Into your project, include Highlight Overlay
import HighlightOverlay from 'react-highlight-overlay';
Then put it on the top of your <body> passing the target(s) class you want
const targets = ['.first-target', '.second-target']
render() {
return <HighlightOverlay targets={targets} />
}
Note: Your
<body>must have bothwidthandheight100%
There is no tests yet but i'll create some tests ASAP. 😛 👀
MIT