You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
carbon/components/codeImage.js

59 lines
1.3 KiB
JavaScript

import React from 'react'
import domtoimage from 'dom-to-image'
const padding = '50px 50px'
class CodeImage extends React.Component {
constructor () {
super()
this.save = this.save.bind(this)
}
save () {
// save
domtoimage.toJpeg(this.container)
.then((dataUrl) => {
const link = document.createElement('a')
link.download = 'my-image-name.jpeg'
link.href = dataUrl
link.click()
})
}
render () {
return (
<div id='section'>
<div id='container' ref={(container) => { this.container = container }}>
<pre>
<code onClick={this.save}>
{this.props.children}
</code>
</pre>
</div>
<style jsx>{`
#section {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#container {
background: green;
padding: ${padding};
display: flex;
justify-content: center;
align-items: center;
}
pre {
background: white;
padding: 10px;
box-shadow: 10px 10px 12px -5px rgba(0,0,0,0.17);
}
`}</style>
</div>
)
}
}
export default CodeImage