react-qr-svg - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

CONTRIBUTING.md

 ## Contributing
 
-This project uses `[semantic-release](https://github.com/semantic-release/semantic-release)`. Please use `[commitizen](https://github.com/commitizen/cz-cli)` when creating commits.
+This project uses [`semantic-release`](https://github.com/semantic-release/semantic-release). Consider using [`commitizen`](https://github.com/commitizen/cz-cli) when creating commits.

dist-modules/components/qr-svg.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -11,7 +11,7 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
@@ -24,4 +24,4 @@ var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var QRCodeImpl = require('qr.js/lib/QRCode');
-var ErrorCorrectLevel = require('qr.js/lib/ErrorCorrectLevel');
+var QRCodeImpl = require("qr.js/lib/QRCode");
+var ErrorCorrectLevel = require("qr.js/lib/ErrorCorrectLevel");
 
@@ -32,10 +32,12 @@ function QRCode() {
     var _ref$value = _ref.value,
-        value = _ref$value === undefined ? '' : _ref$value,
+        value = _ref$value === undefined ? "" : _ref$value,
         _ref$level = _ref.level,
-        level = _ref$level === undefined ? 'L' : _ref$level,
+        level = _ref$level === undefined ? "L" : _ref$level,
         _ref$bgColor = _ref.bgColor,
-        bgColor = _ref$bgColor === undefined ? '#FFFFFF' : _ref$bgColor,
+        bgColor = _ref$bgColor === undefined ? "#FFFFFF" : _ref$bgColor,
         _ref$fgColor = _ref.fgColor,
-        fgColor = _ref$fgColor === undefined ? '#000000' : _ref$fgColor,
-        otherProps = _objectWithoutProperties(_ref, ['value', 'level', 'bgColor', 'fgColor']);
+        fgColor = _ref$fgColor === undefined ? "#000000" : _ref$fgColor,
+        _ref$cellClassPrefix = _ref.cellClassPrefix,
+        cellClassPrefix = _ref$cellClassPrefix === undefined ? "" : _ref$cellClassPrefix,
+        otherProps = _objectWithoutProperties(_ref, ["value", "level", "bgColor", "fgColor", "cellClassPrefix"]);
 
@@ -49,16 +51,30 @@ // adapted from https://github.com/zpao/qrcode.react/blob/master/src/index.js
 
+    var cellClassName = cellClassPrefix && cellClassPrefix + "-cell";
+    var emptyCellClassName = cellClassPrefix && cellClassName + " " + cellClassPrefix + "-cell-empty";
+    var filledCellClassName = cellClassPrefix && cellClassName + " " + cellClassPrefix + "-cell-filled";
+
     var cellIndex = 0; // we use simple order as a key just to avoid the key warning here
 
     return _react2.default.createElement(
-        'svg',
-        _extends({ shapeRendering: 'crispEdges', viewBox: [0, 0, cells.length, cells.length].join(' ') }, otherProps),
+        "svg",
+        _extends({
+            shapeRendering: "crispEdges",
+            viewBox: [0, 0, cells.length, cells.length].join(" ")
+        }, otherProps),
         cells.map(function (row, rowIndex) {
             return row.map(function (cell, colIndex) {
-                return _react2.default.createElement('rect', { height: 1,
+                var className = cell ? filledCellClassName : emptyCellClassName;
+                var classNameProp = className ? { className: className } : null;
+
+                // Only use the fill if no cellClassPrefix was set. See https://github.com/no23reason/react-qr-svg/issues/136 for reasoning.
+                var fill = !classNameProp && (cell ? fgColor : bgColor);
+                var styleProp = fill ? { style: { fill: fill } } : null;
+                return _react2.default.createElement("rect", _extends({
+                    height: 1,
                     key: cellIndex++ // string was too slow here
-                    , style: { fill: cell ? fgColor : bgColor },
+                }, styleProp, classNameProp, {
                     width: 1,
                     x: colIndex,
                     y: rowIndex
-                });
+                }));
             });
@@ -72,5 +88,6 @@ })
     size: _propTypes2.default.number,
-    level: _propTypes2.default.oneOf(['L', 'M', 'Q', 'H']),
+    level: _propTypes2.default.oneOf(["L", "M", "Q", "H"]),
     bgColor: _propTypes2.default.string,
-    fgColor: _propTypes2.default.string
+    fgColor: _propTypes2.default.string,
+    cellClassPrefix: _propTypes2.default.string
 };

dist-modules/index.js

@@ -1,5 +0,5 @@
-'use strict';
+"use strict";
 
-var _qrSvg = require('./components/qr-svg');
+var _qrSvg = require("./components/qr-svg");
 
 module.exports = { QRCode: _qrSvg.QRCode };

index.d.ts

@@ -20,2 +20,6 @@ import * as React from "react";
     fgColor?: string;
+    /**
+     * Prefix for the cell CSS classes
+     */
+    cellClassPrefix?: string;
 }
@@ -26,2 +30,4 @@
  */
-export function QRCode(props: QRCodeProps & React.SVGProps<SVGElement>): React.ReactElement<{}>;
+export function QRCode(
+    props: QRCodeProps & React.SVGProps<SVGElement>,
+): React.ReactElement<{}>;

package.json

 {
-  "name": "react-qr-svg",
-  "description": "React.js component for SVG QR codes",
-  "author": "Dan Homola",
-  "user": "no23reason",
-  "version": "2.1.0",
-  "scripts": {
-    "start": "webpack-dev-server",
-    "test": "npm run test:lint && npm run test:js && npm run test:ts",
-    "test:js": "jest --coverage",
-    "test:tdd": "jest --watch",
-    "test:lint": "eslint . --ext .js --ext .jsx --ignore-path .gitignore --ignore-pattern dist --ignore-pattern docs --cache",
-    "test:ts": "cd tests/typescript && npm install && npm start",
-    "make-docs": "webpack",
-    "dist": "rimraf ./dist-modules && babel ./src --out-dir ./dist-modules",
-    "prepublish": "npm run dist",
-    "semantic-release": "semantic-release pre && npm publish && semantic-release post"
-  },
-  "main": "dist-modules",
-  "typings": "./index.d.ts",
-  "dependencies": {
-    "prop-types": "^15.5.8",
-    "qr.js": "0.0.0"
-  },
-  "devDependencies": {
-    "babel-cli": "^6.10.1",
-    "babel-core": "^6.10.4",
-    "babel-eslint": "^8.0.0",
-    "babel-jest": "^21.0.0",
-    "babel-loader": "^7.0.0",
-    "babel-plugin-transform-class-properties": "^6.23.0",
-    "babel-plugin-transform-es2015-destructuring": "^6.19.0",
-    "babel-plugin-transform-object-rest-spread": "^6.19.0",
-    "babel-preset-es2015": "^6.9.0",
-    "babel-preset-react": "^6.11.1",
-    "babel-preset-react-hmre": "^1.1.1",
-    "babel-register": "^6.9.0",
-    "clean-webpack-plugin": "^0.1.9",
-    "css-loader": "^0.28.0",
-    "cz-conventional-changelog": "^2.0.0",
-    "eslint": "^4.1.0",
-    "eslint-loader": "^1.8.0",
-    "eslint-plugin-react": "^7.1.0",
-    "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "^1.0.0",
-    "git-prepush-hook": "^1.0.1",
-    "highlight.js": "^9.4.0",
-    "html-webpack-plugin": "^2.21.0",
-    "html-webpack-remark-plugin": "^0.3.0",
-    "jest": "^21.0.0",
-    "json-loader": "^0.5.4",
-    "purecss": "^1.0.0",
-    "react": "~15.6.1",
-    "react-dom": "~15.6.1",
-    "react-ghfork": "^0.4.0",
-    "react-test-renderer": "~15.6.1",
-    "rimraf": "^2.6.1",
-    "semantic-release": "^8.0.3",
-    "style-loader": "^0.18.1",
-    "url-loader": "^0.6.1",
-    "webpack": "^3.5.5",
-    "webpack-dev-server": "^2.4.0",
-    "webpack-merge": "^4.0.0"
-  },
-  "peerDependencies": {
-    "react": ">= 0.11.2 < 17.0.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/no23reason/react-qr-svg.git"
-  },
-  "homepage": "https://no23reason.github.io/react-qr-svg/",
-  "bugs": {
-    "url": "https://github.com/no23reason/react-qr-svg/issues"
-  },
-  "keywords": [
-    "react",
-    "reactjs",
-    "qr-code",
-    "qr",
-    "svg"
-  ],
-  "license": "MIT",
-  "pre-push": [
-    "test:js",
-    "test:lint"
-  ],
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
+    "name": "react-qr-svg",
+    "description": "React.js component for SVG QR codes",
+    "author": "Dan Homola",
+    "user": "no23reason",
+    "version": "2.2.0",
+    "scripts": {
+        "dist": "rimraf ./dist-modules && babel ./src --out-dir ./dist-modules",
+        "gh-pages": "npm run gh-pages:build && npm run gh-pages:deploy",
+        "gh-pages:build": "catalog build docs -u ./",
+        "gh-pages:deploy": "gh-pages -d docs/build",
+        "prepublish": "npm run dist",
+        "prepush": "npm run test:lint && npm run test:js",
+        "precommit": "pretty-quick --staged",
+        "semantic-release": "semantic-release",
+        "start": "catalog start docs",
+        "test:js": "jest --coverage",
+        "test:lint": "eslint . --ext .js --ext .jsx --ignore-path .gitignore --ignore-pattern dist --ignore-pattern docs --cache",
+        "test:tdd": "jest --watch",
+        "test:ts": "typings-tester --config ./tests/typescript/tsconfig.json ./tests/typescript/index.tsx",
+        "test": "npm run test:lint && npm run test:js && npm run test:ts"
+    },
+    "main": "dist-modules",
+    "typings": "./index.d.ts",
+    "dependencies": {
+        "prop-types": "^15.5.8",
+        "qr.js": "0.0.0"
+    },
+    "devDependencies": {
+        "@types/react": "^16.4.14",
+        "babel-cli": "^6.26.0",
+        "babel-core": "^6.26.0",
+        "babel-eslint": "^10.0.0",
+        "babel-jest": "^23.0.0",
+        "babel-plugin-syntax-dynamic-import": "^6.18.0",
+        "babel-plugin-transform-class-properties": "^6.24.1",
+        "babel-plugin-transform-es2015-destructuring": "^6.23.0",
+        "babel-plugin-transform-object-rest-spread": "^6.26.0",
+        "babel-preset-env": "^1.6.1",
+        "babel-preset-react": "^6.24.1",
+        "catalog": "^3.2.4",
+        "cz-conventional-changelog": "^2.1.0",
+        "eslint": "^5.0.0",
+        "eslint-plugin-react": "^7.7.0",
+        "gh-pages": "^2.0.0",
+        "husky": "^1.0.0",
+        "jest": "^22.4.2",
+        "prettier": "^1.11.1",
+        "pretty-quick": "^1.4.1",
+        "purecss": "^1.0.0",
+        "react": "^16.2.0",
+        "react-dom": "^16.2.0",
+        "react-github-corner": "^2.1.0",
+        "react-test-renderer": "^16.2.0",
+        "rimraf": "^2.6.1",
+        "semantic-release": "^15.1.6",
+        "typescript": "^3.0.3",
+        "typings-tester": "^0.3.2"
+    },
+    "peerDependencies": {
+        "react": ">= 0.11.2 < 17.0.0"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/no23reason/react-qr-svg.git"
+    },
+    "homepage": "https://no23reason.github.io/react-qr-svg/",
+    "bugs": {
+        "url": "https://github.com/no23reason/react-qr-svg/issues"
+    },
+    "keywords": [
+        "react",
+        "reactjs",
+        "qr-code",
+        "qr",
+        "svg"
+    ],
+    "license": "MIT",
+    "config": {
+        "commitizen": {
+            "path": "./node_modules/cz-conventional-changelog"
+        }
     }
-  }
-}
+}

README.md

@@ -1,19 +0,16 @@
-[![build status](https://secure.travis-ci.org/no23reason/react-qr-svg.svg)](http://travis-ci.org/no23reason/react-qr-svg)
-[![npm version](https://img.shields.io/npm/v/react-qr-svg.svg)](https://www.npmjs.com/package/react-qr-svg)
-[![bitHound Score](https://www.bithound.io/github/no23reason/react-qr-svg/badges/score.svg)](https://www.bithound.io/github/no23reason/react-qr-svg)
-[![Dependency Status](https://david-dm.org/no23reason/react-qr-svg.svg)](https://david-dm.org/no23reason/react-qr-svg)
-[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
-[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
-[![Greenkeeper badge](https://badges.greenkeeper.io/no23reason/react-qr-svg.svg)](https://greenkeeper.io/)
+[![build status](https://secure.travis-ci.org/no23reason/react-qr-svg.svg)](http://travis-ci.org/no23reason/react-qr-svg) [![npm version](https://img.shields.io/npm/v/react-qr-svg.svg)](https://www.npmjs.com/package/react-qr-svg) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![Greenkeeper badge](https://badges.greenkeeper.io/no23reason/react-qr-svg.svg)](https://greenkeeper.io/)
 
 # react-qr-svg
+
 React component for rendering SVG QR codes
 
 ## Demo
-Basic demo can be found at the [demo page](https://no23reason.github.io/react-qr-svg/).
 
+Basic demo can be found at the [demo page](https://no23reason.github.io/react-qr-svg/#/demo).
+
 ## Why SVG?
+
 Most of the existing React components for QR (namely [`qrcode.react`](https://github.com/zpao/qrcode.react), which was used as a starting point for this project) use `<canvas>` for rendering.
 
-This is fine for most scenarios, however when trying to print such code, it gets blurry. This is caused by the fact that `<canvas>` contents get rastered and *then* scaled in the process resulting in the blurriness.
+This is fine for most scenarios, however when trying to print such code, it gets blurry. This is caused by the fact that `<canvas>` contents get rastered and _then_ scaled in the process resulting in the blurriness.
 
@@ -25,2 +22,3 @@ On the other hand, SVG retains the vector information of its contents and therefore is scaled properly when printed.
 Install using `npm`:
+
 ```js
@@ -33,14 +31,16 @@ npm install react-qr-svg --save
 ```js
-import React from 'react';
-import { QRCode } from 'react-qr-svg';
+import React from "react";
+import { QRCode } from "react-qr-svg";
 
 class Demo extends React.Component {
     render() {
-        return (<QRCode
-                    bgColor="#FFFFFF"
-                    fgColor="#000000"
-                    level="Q"
-                    style={{ width: 256 }}
-                    value="some text"
-                />);
+        return (
+            <QRCode
+                bgColor="#FFFFFF"
+                fgColor="#000000"
+                level="Q"
+                style={{ width: 256 }}
+                value="some text"
+            />
+        );
     }
@@ -51,3 +51,5 @@ }
 ## Props
+
 The props available are (shown with default values):
+
 ```js
@@ -59,2 +61,3 @@ {
     fgColor: '#000000', // Color of the dark squares
+    cellClassPrefix: '', // Prefix of the CSS classes, if not specified, bgColor and fgColor are ignored
 }
@@ -67,3 +70,19 @@ ```
 
+## CSS styling
+
+You can use CSS to set the QR code colors instead of the `bgColor` and `fgColor` props. You just need to specify the `cellClassPrefix` prop and three CSS classes will become available for you to style.
+
+Let's say you used `my-qr-code` as the `cellClassPrefix`. The generated classes are:
+
+* `my-qr-code-cell` for all the cells
+* `my-qr-code-cell-empty` for the empty cells
+
+*   `my-qr-code-cell-filled` for the filled cells
+
+You can then set the colors using the `fill` CSS property. See [CSS Demo](https://no23reason.github.io/react-qr-svg/#/css-demo) for an example.
+
+**Note**: If you specify `cellClassPrefix`, `bgColor` and `fgColor` values are ignored.
+
 ## Acknowledgements
+
 This project is heavily inspired by the [`qrcode.react`](https://github.com/zpao/qrcode.react) project.
@@ -75,2 +94,2 @@
 
-*react-qr-svg* is available under MIT. See [LICENSE](https://github.com/no23reason/react-qr-svg/tree/master/LICENSE) for more details.
+_react-qr-svg_ is available under MIT. See [LICENSE](https://github.com/no23reason/react-qr-svg/tree/master/LICENSE) for more details.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

469462

increased by4318.88%

Dev dependency count

29

decreased by-23.68%

Number of package files

9

increased by12.5%

Lines of code

99

increased by26.92%

Number of lines in readme file

90

increased by26.76%

No dependency changes