66 lines
1.5 KiB
JavaScript
66 lines
1.5 KiB
JavaScript
import React, { useMemo } from 'react'
|
|
import { View } from 'react-native'
|
|
import Svg, { Rect } from 'react-native-svg'
|
|
import { generateQrMatrix } from '../utils/generateQrMatrix'
|
|
|
|
const DEFAULT_SIZE = 220
|
|
|
|
const QrCode = ({
|
|
value,
|
|
size = DEFAULT_SIZE,
|
|
color = '#FFFFFF',
|
|
backgroundColor = 'transparent',
|
|
errorCorrectionLevel = 'M',
|
|
}) => {
|
|
const { matrix } = useMemo(() => {
|
|
try {
|
|
return generateQrMatrix({ value, errorCorrectionLevel })
|
|
} catch (error) {
|
|
console.error('qr.code.generate.error', error)
|
|
return { matrix: [] }
|
|
}
|
|
}, [value, errorCorrectionLevel])
|
|
|
|
const cellSize = useMemo(() => {
|
|
if (!matrix || !matrix.length) {
|
|
return 0
|
|
}
|
|
return size / matrix.length
|
|
}, [matrix, size])
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
width: size,
|
|
height: size,
|
|
backgroundColor,
|
|
}}
|
|
>
|
|
<Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
|
|
{matrix.map((row, rowIndex) => {
|
|
return row.map((isDark, colIndex) => {
|
|
if (!isDark) {
|
|
return null
|
|
}
|
|
|
|
const key = `${rowIndex}-${colIndex}`
|
|
|
|
return (
|
|
<Rect
|
|
key={key}
|
|
x={colIndex * cellSize}
|
|
y={rowIndex * cellSize}
|
|
width={cellSize}
|
|
height={cellSize}
|
|
fill={color}
|
|
/>
|
|
)
|
|
})
|
|
})}
|
|
</Svg>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default QrCode
|