react-qrcode

ReactQRCode

🤳 A React component for QR code generation with qrcode

Demo

Usage

// Component
import ReactDOM from 'react-dom'
import { QRCode } from 'react-qrcode'

ReactDOM.render(<QRCode value="https://www.1stg.me" />)

// hooks
import { useQRCode } from 'react-qrcode'

export const App = () => {
  const [value, setValue] = useState('https://www.1stg.me')
  const dataUrl = useQRCode(value)
  return (
    <>
      <div>dataUrl: {dataUrl}</div>
      <img src={dataUrl} />
      <input onChange={e => setValue(e.currentTarget.value)} />
    </>
  )
}

Available Props

prop	type (range)	default value
version	number (1-40)	N/A
errorCorrectionLevel	String ('low', 'medium', 'quartile', 'high', 'L', 'M', 'Q', 'H')	'M'
maskPattern	number (0-7)	N/A
toSJISFunc	Function	N/A
margin	number	4
scale	number	4
width	number	N/A
color	{ dark: string; light:string }	{ dark: '#000000ff', light: '#ffffffff' }
type	string ('image/png', 'image/jpeg', 'image/webp')	'image/png'
quality	number(0-1)	0.92
value	string | Array<{ data: string; mode?: string }>	N/A

Sponsors

1stG	RxTS	UnTS

Backers

1stG	RxTS	UnTS

Changelog

Detailed changes for each release are documented in CHANGELOG.md.

License

MIT © JounQin@1stG.me