mirror of https://github.com/kremalicious/blog.git
45 lines
985 B
JavaScript
45 lines
985 B
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { QRCode } from 'react-qr-svg'
|
|
import Clipboard from 'react-clipboard.js'
|
|
import { ReactComponent as IconClipboard } from '../../images/clipboard.svg'
|
|
|
|
import styles from './Qr.module.scss'
|
|
|
|
const onCopySuccess = e => {
|
|
e.trigger.classList.add(styles.copied)
|
|
}
|
|
|
|
const Qr = ({ address, title }) => (
|
|
<>
|
|
{title && <h4>{title}</h4>}
|
|
<QRCode
|
|
bgColor="transparent"
|
|
fgColor="#6b7f88"
|
|
level="Q"
|
|
style={{ width: 120 }}
|
|
value={address}
|
|
className={styles.qr}
|
|
/>
|
|
|
|
<pre className={styles.code}>
|
|
<code>{address}</code>
|
|
<Clipboard
|
|
data-clipboard-text={address}
|
|
button-title="Copy to clipboard"
|
|
onSuccess={e => onCopySuccess(e)}
|
|
className={styles.button}
|
|
>
|
|
<IconClipboard />
|
|
</Clipboard>
|
|
</pre>
|
|
</>
|
|
)
|
|
|
|
Qr.propTypes = {
|
|
address: PropTypes.string.isRequired,
|
|
title: PropTypes.string
|
|
}
|
|
|
|
export default Qr
|