react-qrious
TypeScript icon, indicating that this package has built-in type declarations

2.5.6 • Public • Published

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
1stG Open Collective backers and sponsors RxTS Open Collective backers and sponsors UnTS Open Collective backers and sponsors

Backers

1stG RxTS UnTS
1stG Open Collective backers and sponsors RxTS Open Collective backers and sponsors UnTS Open Collective backers and sponsors

Changelog

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

License

MIT © JounQin@1stG.me

Package Sidebar

Install

npm i react-qrious

Weekly Downloads

956

Version

2.5.6

License

MIT

Unpacked Size

13.7 kB

Total Files

18

Last publish

Collaborators

  • jounqin
  • i1stg