react-qrious

ReactQrious

🤳 A React component for QR code generation with qrious

Demo

Usage

// Component
import ReactDOM from 'react-dom'
import { QRious } from 'react-qrious'

ReactDOM.render(
  <QRious value="https://www.1stg.me" />,
  document.getElementById('qrious'),
)

// hooks
import { useQrious } from 'react-qrious'

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

Available Props

prop	type	default value
background	string (CSS color)	"#ffffff"
backgroundAlpha	number (0.1-1.0)	1.0
foreground	string (CSS color)	"#000000"
foregroundAlpha	number (0.1-1.0)	1.0
level	string ("L", "M", "Q", "H")	"L"
mime	string ("image/png", "image/jpeg")	"image/png"
padding	number	null
size	number	100
value	string

Sponsors

1stG	RxTS	UnTS

Backers

1stG	RxTS	UnTS

Changelog

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

License

MIT © JounQin@1stG.me