Skip to content

Commit 4a9df59

Browse files
partners-wlipartners-wli
committed
:initial commit
1 parent ff40c06 commit 4a9df59

File tree

12 files changed

+504
-1
lines changed

12 files changed

+504
-1
lines changed

‎.gitignore

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# OS Files
2+
.DS_Store
3+
Thumbs.db
4+
5+
# Dependencies
6+
node_modules/
7+
8+
# Dev/Build Artifacts
9+
/dist/
10+
/tests/e2e/videos/
11+
/tests/e2e/screenshots/
12+
/tests/unit/coverage/
13+
jsconfig.json
14+
15+
# Local Env Files
16+
.env.local
17+
.env.*.local
18+
19+
# Log Files
20+
*.log
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*
24+
25+
# Unconfigured Editors
26+
.idea
27+
*.suo
28+
*.ntvs*
29+
*.njsproj
30+
*.sln
31+
*.sw*
32+
#Yarn
33+
yarn.lock

‎CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
1.0.0 (JULY 23, 2020)
2+
Initial release

‎README.md

+106-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,106 @@
1-
# ReactJS-QRCode-Generator
1+
# ReactJS - QRCode Generator
2+
3+
ReactJS based QR Code / Barcode Generator.
4+
5+
## Table of contents
6+
7+
- [Browser Support](#browser-support)
8+
- [Demo](#demo)
9+
- [Getting started](#getting-started)
10+
- [Usage](#usage)
11+
- [Available Props](#available-props)
12+
- [Want to Contribute?](#want-to-contribute)
13+
- [Collection of Components](#collection-of-components)
14+
- [Changelog](#changelog)
15+
- [Credits](#credits)
16+
- [License](#license)
17+
- [Keywords](#Keywords)
18+
19+
## Browser Support
20+
21+
| ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) |
22+
| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
23+
| 83.0 ✔ | 77.0 ✔ | 13.1.1 ✔ | 83.0 ✔ | 11.9 ✔ |
24+
25+
## Demo
26+
27+
[![](qrcode.gif)](https://github.com/weblineindia/ReactJS-QRCode-Generator/qrcode.gif)
28+
29+
## Getting started
30+
31+
Install the npm package:
32+
33+
```bash
34+
npm install react-weblineindia-qrcode-generator
35+
#OR
36+
yarn add react-weblineindia-qrcode-generator
37+
```
38+
39+
## Usage
40+
41+
Use the `<react-weblineindia-qrcode-generator>` component:
42+
43+
```js
44+
import React ,{ Component } from 'react';
45+
import QRCode from "react-weblineindia-qrcode-generator";
46+
47+
class Test extends Component {
48+
constructor(props) {
49+
super(props);
50+
this.state = {
51+
vData: "https://www.weblineindia.com/",
52+
};
53+
render(){
54+
return (
55+
<div>
56+
<QRCode value={this.state.vData} />
57+
</div>
58+
)}
59+
}
60+
```
61+
62+
## Available Props
63+
64+
| prop | type | default value |
65+
| --------- | ---------------------------- | ------------- |
66+
| `value` | `string` |
67+
| `size` | `number` | 128 |
68+
| `bgColor` | `string` | '#FFFFFF' |
69+
| `fgColor` | `string` | '#000000' |
70+
| `level` | `string` (`'L' 'M' 'Q' 'H'`) | 'L' |
71+
72+
73+
## Want to Contribute?
74+
75+
- Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).
76+
- [Fork it](http://help.github.com/forking/).
77+
- Create new branch to contribute your changes.
78+
- Commit all your changes to your branch.
79+
- Submit a [pull request](http://help.github.com/pull-requests/).
80+
81+
---
82+
83+
## Collection of Components
84+
85+
We have built many other components and free resources for software development in various programming languages. Kindly click here to view our [Free Resources for Software Development](https://www.weblineindia.com/software-development-resources.html)
86+
87+
---
88+
89+
## Changelog
90+
91+
Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).
92+
93+
## Credits
94+
95+
react-weblineindia-qrcode-generator is inspired by [react-qr-scanner](https://www.npmjs.com/package/react-qr-scanner).
96+
97+
98+
## License
99+
100+
[MIT](LICENSE)
101+
102+
[mit]: https://github.com/weblineindia/ReactJS-QRCode-Generator/blob/master/LICENSE
103+
104+
## Keywords
105+
106+
react-weblineindia-qrcode-generator, react-qrcode, qrcode, qrcode-generator, reactjs-qrcode, react-barcode, barcode-generator

‎index.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
Author Name : WeblineIndia | https://www.weblineindia.com/
3+
4+
For more such software development components and code libraries, visit us at
5+
https://www.weblineindia.com/software-development-resources.html
6+
7+
Our Github URL : https://github.com/weblineindia
8+
**/

‎lib/components/QRCode/index.js

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
2+
Object.defineProperty(exports, "__esModule", {
3+
value: true
4+
});
5+
6+
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
7+
8+
var _QRCode = require("qr.js/lib/QRCode");
9+
10+
var _QRCode2 = _interopRequireDefault(_QRCode);
11+
12+
var _ErrorCorrectLevel = require("qr.js/lib/ErrorCorrectLevel");
13+
14+
var _ErrorCorrectLevel2 = _interopRequireDefault(_ErrorCorrectLevel);
15+
16+
var _propTypes = require("prop-types");
17+
18+
var _propTypes2 = _interopRequireDefault(_propTypes);
19+
20+
var _react = require("react");
21+
22+
var _react2 = _interopRequireDefault(_react);
23+
24+
var _QRCodeSurface = require("../QRCodeSurface");
25+
26+
var _QRCodeSurface2 = _interopRequireDefault(_QRCodeSurface);
27+
28+
var _QRCodeSurfaceCell = require("../QRCodeSurfaceCell");
29+
30+
var _QRCodeSurfaceCell2 = _interopRequireDefault(_QRCodeSurfaceCell);
31+
32+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
33+
34+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
35+
36+
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
37+
38+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // A `qr.js` doesn't handle error level of zero (M) so we need to do it right, thus the deep require.
39+
40+
41+
var propTypes = {
42+
bgColor: _propTypes2.default.string,
43+
fgColor: _propTypes2.default.string,
44+
level: _propTypes2.default.oneOf(["L", "M", "Q", "H"]),
45+
size: _propTypes2.default.number,
46+
value: _propTypes2.default.string.isRequired
47+
};
48+
49+
var defaultProps = {
50+
bgColor: "#FFFFFF",
51+
fgColor: "#000000",
52+
level: "L",
53+
size: 256
54+
};
55+
56+
var QRCode = function (_React$PureComponent) {
57+
_inherits(QRCode, _React$PureComponent);
58+
59+
function QRCode() {
60+
_classCallCheck(this, QRCode);
61+
62+
return _possibleConstructorReturn(this, (QRCode.__proto__ || Object.getPrototypeOf(QRCode)).apply(this, arguments));
63+
}
64+
65+
_createClass(QRCode, [{
66+
key: "renderQRCode",
67+
value: function renderQRCode() {
68+
var _props = this.props,
69+
bgColor = _props.bgColor,
70+
fgColor = _props.fgColor,
71+
level = _props.level,
72+
size = _props.size,
73+
value = _props.value;
74+
// We'll use type === -1 to force QRCode to automatically pick the best type
75+
76+
var qrcode = new _QRCode2.default(-1, _ErrorCorrectLevel2.default[level]);
77+
qrcode.addData(value);
78+
qrcode.make();
79+
var cells = qrcode.modules;
80+
var tileSize = size / cells.length;
81+
return cells.map(function (row, rowIndex) {
82+
return row.map(function (cell, cellIndex) {
83+
var fill = cell ? fgColor : bgColor;
84+
var qrItemWidth = Math.ceil((cellIndex + 1) * tileSize) - Math.floor(cellIndex * tileSize);
85+
var qrItemHeight = Math.ceil((rowIndex + 1) * tileSize) - Math.floor(rowIndex * tileSize);
86+
var d = "M 0 0 L " + qrItemWidth + " 0 L " + qrItemWidth + " " + qrItemHeight + " L 0 " + qrItemHeight + " Z";
87+
var transformX = Math.round(cellIndex * tileSize);
88+
var transformY = Math.round(rowIndex * tileSize);
89+
return _react2.default.createElement(_QRCodeSurfaceCell2.default
90+
/* eslint-disable react/no-array-index-key */
91+
, { key: "rectangle-" + rowIndex + "-" + cellIndex
92+
/* eslint-enable react/no-array-index-key */
93+
, d: d,
94+
fill: fill,
95+
transformX: transformX,
96+
transformY: transformY
97+
});
98+
});
99+
});
100+
}
101+
}, {
102+
key: "render",
103+
value: function render() {
104+
var size = this.props.size;
105+
106+
return _react2.default.createElement(
107+
_QRCodeSurface2.default,
108+
{ size: size, style: { height: size, width: size } },
109+
this.renderQRCode()
110+
);
111+
}
112+
}]);
113+
114+
return QRCode;
115+
}(_react2.default.PureComponent);
116+
117+
QRCode.propTypes = propTypes;
118+
QRCode.defaultProps = defaultProps;
119+
120+
exports.default = QRCode;

‎lib/components/QRCodeSurface/index.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
2+
Object.defineProperty(exports, "__esModule", {
3+
value: true
4+
});
5+
6+
var _propTypes = require("prop-types");
7+
8+
var _propTypes2 = _interopRequireDefault(_propTypes);
9+
10+
var _react = require("react");
11+
12+
var _react2 = _interopRequireDefault(_react);
13+
14+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15+
16+
var propTypes = {
17+
children: _propTypes2.default.array.isRequired,
18+
size: _propTypes2.default.number.isRequired,
19+
style: _propTypes2.default.object
20+
};
21+
22+
var defaultProps = {
23+
style: undefined
24+
};
25+
26+
var QRCodeSurface = function QRCodeSurface(_ref) {
27+
var children = _ref.children,
28+
size = _ref.size,
29+
style = _ref.style;
30+
return _react2.default.createElement(
31+
"svg",
32+
{ height: size, style: style, width: size },
33+
children
34+
);
35+
};
36+
37+
QRCodeSurface.propTypes = propTypes;
38+
QRCodeSurface.defaultProps = defaultProps;
39+
40+
exports.default = QRCodeSurface;

‎lib/components/QRCodeSurface/index.native.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
7+
var _art = require("@react-native-community/art");
8+
9+
var _propTypes = require("prop-types");
10+
11+
var _propTypes2 = _interopRequireDefault(_propTypes);
12+
13+
var _react = require("react");
14+
15+
var _react2 = _interopRequireDefault(_react);
16+
17+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18+
19+
var propTypes = {
20+
children: _propTypes2.default.array.isRequired,
21+
size: _propTypes2.default.number.isRequired,
22+
style: _propTypes2.default.object
23+
};
24+
25+
var defaultProps = {
26+
style: undefined
27+
};
28+
29+
var QRCodeSurface = function QRCodeSurface(_ref) {
30+
var children = _ref.children,
31+
size = _ref.size,
32+
style = _ref.style;
33+
return _react2.default.createElement(
34+
_art.Surface,
35+
{ height: size, style: style, width: size },
36+
children
37+
);
38+
};
39+
40+
QRCodeSurface.propTypes = propTypes;
41+
QRCodeSurface.defaultProps = defaultProps;
42+
43+
exports.default = QRCodeSurface;

0 commit comments

Comments
 (0)