devmehq / react-qr-code Goto Github PK

View Code? Open in Web Editor NEW

11.0 1.0 1.0 2.21 MB

A QRCode React Component ( SVG / Canvas )

License: MIT License

JavaScript 10.69% TypeScript 89.31%

qr-code react react-qr-code-generator react-qr-code

react-qr-code's Introduction

@devmehq/react-qr-code

Simple & Advanced React component to generate QR codes

Installation

npm install @devmehq/react-qr-code

yarn install @devmehq/react-qr-code

Usage

import React from 'react';
import { ReactQrCode } from '@devmehq/react-qr-code';

<ReactQrCode value="http://facebook.github.io/react/" />

var React = require('react');
var { ReactQrCode } = require('@devmehq/react-qr-code');

<ReactQrCode value="http://facebook.github.io/react/" />

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'`
`marginSize`	`number`	`false`
`images`	`array` (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

@devmehq/react-qr-code 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>.

TODO

Add Image Ref
Add Corner Images and Center Image
Add Examples to wifi password, 2fa, and other QR codes
ADD SSR Rendering Support
Add Download / Share QR Code
Add Test

LICENSE MIT

react-qr-code's People

Contributors

Stargazers

Watchers

Forkers

favour-chuks

react-qr-code's Issues

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: .github/renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: Invalid configuration option: packageRules[0].approvals_required

Build warning/error when running project

Bug report

react version: 17.0+
react-qr-code version: 1.0.5

Current behaviour

When running react-scripts start a build warning occurs:

WARNING in ./node_modules/@devmehq/react-qr-code/esm5/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/some/path/node_modules/@devmehq/src/index.tsx' file: Error: ENOENT: no such file or directory, open '/some/path/node_modules/@devmehq/src/index.tsx'

import { ReactQrCode } from '@devmehq/react-qr-code';

<ReactQrCode size={200} value={'some_value'} />

Expected behaviour

No build warning/error should occur when running react-scripts start created with create-react-app

npx create-react-app myproject --template typescript

Scan Event Tracking

Feature request

Can we track the Completion of Scan Event

Use case(s)

I need to set up a GA Event when Scan is complete, can we do that??

sorry please delete

edit: sorry please delete this package doesnt seem to work.

License/Copyright Violation

I don't care that you have forked and are making modifications, that's open source! However I do request that you comply with copyright laws and the license of the original project. You obviously hold your own copyrights to code you write and may license your additions/changes however you choose, but you do need to comply with the license of the original code from which you started. Thanks!

Finish `images` feature

This is a great React component!

Please finish the images feature so images (as logos) can be added to the generated QR code!

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions

.github/workflows/ci.yml

styfle/cancel-workflow-action 0.12.1

actions/checkout v4@692973e3d937129bcbf40652eb9f2f61becf3332

FranzDiebold/github-env-vars-action v2

actions/setup-node v4

.github/workflows/release.yml

styfle/cancel-workflow-action 0.12.1

actions/checkout v4@692973e3d937129bcbf40652eb9f2f61becf3332

FranzDiebold/github-env-vars-action v2

actions/setup-node v4

npm

package.json

@ianvs/prettier-plugin-sort-imports 4.2.1

@rollup/plugin-commonjs 25.0.8

@rollup/plugin-node-resolve 15.2.3

@rollup/plugin-replace 5.0.7

@rollup/plugin-typescript 11.1.6

@types/jasmine 5.1.4

@types/jest 29.5.12

@types/react 18.3.3

@types/react-dom 18.3.0

@typescript-eslint/eslint-plugin 7.13.0

@typescript-eslint/parser 7.13.0

eslint 8.57.0

eslint-config-prettier 9.1.0

husky 9.0.11

jest 29.7.0

lint-staged 15.2.7

prettier 3.3.2

pretty-quick 4.0.0

rollup 4.18.0

rollup-plugin-uglify 6.0.4

ts-jest 29.1.4

tslib 2.6.3

typescript 5.4.5

react >=17.0.2

react-dom >=17.0.2

Check this box to trigger a request for Renovate to run again on this repository

React warning: 'React does not recognize the `basePath`'

Great React component, thank you!

Bug report

react-qr-code version: 1.0.6
Affected browsers (and versions): Chrome

Current behaviour

React JavaScript warning:

Warning: React does not recognize the `basePath` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `basepath` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Expected behaviour

No React warning.

devmehq / react-qr-code Goto Github PK

react-qr-code's Introduction

@devmehq/react-qr-code

Installation

Usage

Available Props

imageSettings

Custom Styles

TODO

LICENSE MIT

react-qr-code's People

Contributors

Stargazers

Watchers

Forkers

react-qr-code's Issues

Bug report

Current behaviour

Expected behaviour

Feature request

Use case(s)

Open

Detected dependencies

Bug report

Current behaviour

Expected behaviour

Recommend Projects

Recommend Topics

Recommend Org

`imageSettings`