qrcode.react alternatives and similar libraries
Based on the "Utilities" category
-
react-intl
Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations. -
react-three-renderer
Render into a three.js canvas using React. -
react-intl-universal
demo Internationalize React apps. Not only for React.Component but also for Vanilla JS. -
react-stripe-checkout
Load stripe's checkout.js as a react component. Easiest way to use checkout with React. -
backbone-react-component
A bit of nifty glue that automatically plugs your Backbone models and collections into your React components, on the browser and server. -
reactive-elements
Allows to use React.js component as HTML element (web component). -
react-fetching-library
Fetch data with hooks. SSR and TS support. -
react-translate-component
A component for React that utilizes the Counterpart module to provide multi-lingual/localized text content. -
react-localstorage
Simple componentized localstorage implementation for Facebook's React. -
gl-react
OpenGL / WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm. -
gl-react-dom
WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm. -
elm-react-component
A React component which wraps an Elm module to be used in a React application. -
react-children-utilities
Extended utils for React.Children. -
react-translate-maker
Universal internationalization (i18n) open source library for React.
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest. Visit our partner's website for more details.
Do you think we are missing an alternative of qrcode.react or a related project?
README
qrcode.react
A React component to generate QR codes.
Installation
npm install qrcode.react
Usage
var React = require('react');
var QRCode = require('qrcode.react');
React.render(
<QRCode value="http://facebook.github.io/react/" />,
mountNode
);
Available Props
| prop | type | default value |
|---|---|---|
value |
string |
|
renderAs |
string ('canvas' 'svg') |
'canvas' |
size |
number |
128 |
bgColor |
string (CSS color) |
"#FFFFFF" |
fgColor |
string (CSS color) |
"#000000" |
level |
string ('L' 'M' 'Q' 'H') |
'L' |
includeMargin |
boolean |
false |
imageSettings |
object (see below) |
imageSettings
| field | type | default value |
|---|---|---|
src |
string |
|
x |
number |
none, will center |
y |
number |
none, will center |
height |
number |
10% of size |
width |
number |
10% of size |
excavate |
boolean |
false |
Custom Styles
qrcode.react will pass through any additional props to the underlying DOM node (<svg> or <canvas>). This allows the use of inline style or custom className to customize the rendering. One common use would be to support a responsive layout.
Note: In order to render QR Codes in <canvas> on high density displays, we scale the canvas element to contain an appropriate number of pixels and then use inline styles to scale back down. We will merge any additional styles, with custom height and width overriding our own values. This allows scaling to percentages but if scaling beyond the size, you will encounter blurry images. I recommend detecting resizes with something like react-measure to detect and pass the appropriate size when rendering to <canvas>.
LICENSE [ISC](LICENSE)
*Note that all licence references and agreements mentioned in the qrcode.react README section above
are relevant to that project's source code only.