Ever want to put a live preview in a web page, of that page, or a piece of it?
This will let you do that, sorta. Here's a quick live demo
Sometimes called the droste effect or mise en abyme.
Uses html2canvas, which you probably want to read about here.
npm install --save react-droste
# or
yarn add react-drosteimport React, { Component } from 'react'
import { Droste } from 'react-droste'
//import 'react-droste/dist/index.css'
class Droste extends Component {
render() {
// a good starting place config
let config = { useCORS: true, scale: 0.5 }
return <MyComponent width={100} height={150} config={config} />
}
}See the example/ directory for more.
width: width of the preview canvas component Requiredheight: height of the preview canvas component Requiredttl: ms before refresh, defaults to 500msconfig: configuration object that's passed tohtml2canvas. To scale down the image, for instance try passing{scale: 0.5 }.element: the element to take a preview of. defaults todocument.body
html2canvas doesn't support all of HTML/CSS, so your page may not look perfect. Additionally, things like the CSS :hover pseudo-class won't work. Here's a page of what is and isn't supported.
To get images to work, you either need to serve them from the same origin, or have cors set on them on the images request headers (on the server) and set useCORS to true in the config object that's passed to html2canvas.
This is extremely inefficient and should not be used for anything serious. Currently using a combination of setInterval and raf-schd.
Here are some relevant discussions of requestAnimationFrame and throttling.
A better way to do it would be to use getDisplayMedia and the browser Screen Capture API, but that would require the user to not only give permission, but they would need to select the window to be captured.
Made with create-react-library
MIT © Zach Schwartz