Merge pull request #46 from no23reason/features/size-deprecation-warning

Prepare to deprecate size prop
no23reason · Jun 20, 2017 · 52f16eb · 52f16eb
2 parents 17aa546 + 804d25b
commit 52f16eb
Show file tree

Hide file tree

Showing 15 changed files with 58 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -35,11 +35,11 @@ import { QRCode } from 'react-qr-svg';
 class Demo extends React.Component {
     render() {
         return (<QRCode
-                    value="some text"
-                    size={512}
-                    level="Q"
                     bgColor="#FFFFFF"
                     fgColor="#000000"
+                    level="Q"
+                    style={{ width: 256 }}
+                    value="some text"
                 />);
     }
 }
@@ -50,7 +50,7 @@ The props available are (shown with default values):
 ```js
 {
     value: '', // The value to encode in the code
-    size: 256, // Size of the code in pixels
+    size: 256, // Size of the code in pixels. This is obsolete and will be removed in the next major version!
     level: 'L', // QR Error correction level
     bgColor: '#FFFFFF', // Color of the bright squares
     fgColor: '#000000', // Color of the dark squares
@@ -59,6 +59,8 @@ The props available are (shown with default values):
 
 The `level` prop corresponds to [Error correction level](https://en.wikipedia.org/wiki/QR_code#Error_correction) so the valid values are `L`, `M`, `Q` and `H`.
 
+You can also specify all the props that are valid for the `<svg>` React element (e.g. `style`, `className` or `width` which you can use to specify the size of the QR code).
+
 ## Acknowledgements
 This project is heavily inspired by the [`qrcode.react`](https://github.com/zpao/qrcode.react) project.
 

diff --git a/demo/Demo.jsx b/demo/Demo.jsx
@@ -20,7 +20,7 @@ class Demo extends React.Component {
   updateFgColor = e => this.setState({ ...this.state, fgColor: e.target.value });
 
   render() {
-    const {state, updateSize, updateValue, updateLevel, updateBgColor, updateFgColor} = this;
+    const { state, updateSize, updateValue, updateLevel, updateBgColor, updateFgColor } = this;
     return (<div>
       <form className="pure-form pure-form-stacked">
         <fieldset>
@@ -53,7 +53,13 @@ class Demo extends React.Component {
         </fieldset>
       </form>
       <div className="qrcode">
-        <QRCode bgColor={state.bgColor} fgColor={state.fgColor} level={state.level} size={state.size} value={state.value} />
+        <QRCode
+          bgColor={state.bgColor}
+          fgColor={state.fgColor}
+          level={state.level}
+          style={{ width: state.size }}
+          value={state.value}
+        />
       </div>
     </div>);
   }

diff --git a/docs-resources/DOCS.md b/docs-resources/DOCS.md
@@ -17,11 +17,11 @@ import { QRCode } from 'react-qr-svg';
 class Demo extends React.Component {
     render() {
         return (<QRCode
-                    value="some text"
-                    size={512}
-                    level="Q"
                     bgColor="#FFFFFF"
                     fgColor="#000000"
+                    level="Q"
+                    style={{ width: 256 }}
+                    value="some text"
                 />);
     }
 }

diff --git a/docs/app.4f68334a5808e054e71f.js b/docs/app.4f68334a5808e054e71f.js
diff --git a/docs/app.9f75ed5a44b04282b735.js b/docs/app.9f75ed5a44b04282b735.js
diff --git a/docs/index.html b/docs/index.html
@@ -9,7 +9,7 @@
 
 
 
-  <link href="style.6139a0e7899fe1906c11.css" rel="stylesheet"></head>
+  <link href="style.0f46ed9cbf5e2764169e.css" rel="stylesheet"></head>
   <body>
     <div class="pure-g">
       <header class="pure-u-1">
@@ -35,17 +35,17 @@ <h1>react-qr-svg</h1>
 <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
     render() {
         <span class="hljs-keyword">return</span> (&lt;QRCode
-                    value=&quot;some text&quot;
-                    size={512}
-                    level=&quot;Q&quot;
                     bgColor=&quot;#FFFFFF&quot;
                     fgColor=&quot;#000000&quot;
+                    level=&quot;Q&quot;
+                    style={{ width: 256 }}
+                    value=&quot;some text&quot;
                 /&gt;);
     }
 }
 </code></pre></pre><p><span>For the complete API documentation and more, please see the  </span><a href="https://github.com/no23reason/react-qr-svg/blob/master/README.md"><span>README</span></a><span>.</span></p></div></div>
         </section>
       </article>
     </div>
-  <script type="text/javascript" src="manifest.9817e370d02e630febf8.js"></script><script type="text/javascript" src="vendors.ec50d40b112c61dff298.js"></script><script type="text/javascript" src="app.4f68334a5808e054e71f.js"></script><script type="text/javascript" src="style.6139a0e7899fe1906c11.js"></script></body>
+  <script type="text/javascript" src="manifest.13035e058901d5ab0fde.js"></script><script type="text/javascript" src="vendors.f5af5a37821b3505a0eb.js"></script><script type="text/javascript" src="app.9f75ed5a44b04282b735.js"></script><script type="text/javascript" src="style.0f46ed9cbf5e2764169e.js"></script></body>
 </html>
diff --git a/docs/manifest.9817e370d02e630febf8.js → docs/manifest.13035e058901d5ab0fde.js b/docs/manifest.9817e370d02e630febf8.js → docs/manifest.13035e058901d5ab0fde.js
diff --git a/docs/style.6139a0e7899fe1906c11.css → docs/style.0f46ed9cbf5e2764169e.css b/docs/style.6139a0e7899fe1906c11.css → docs/style.0f46ed9cbf5e2764169e.css
@@ -1,5 +1,5 @@
 /*!
-Pure v0.6.2
+Pure v1.0.0
 Copyright 2013 Yahoo!
 Licensed under the BSD License.
 https://github.com/yahoo/pure/blob/master/LICENSE.md

diff --git a/docs/style.0f46ed9cbf5e2764169e.js b/docs/style.0f46ed9cbf5e2764169e.js
diff --git a/docs/style.6139a0e7899fe1906c11.js b/docs/style.6139a0e7899fe1906c11.js
diff --git a/docs/vendors.ec50d40b112c61dff298.js b/docs/vendors.ec50d40b112c61dff298.js
diff --git a/docs/vendors.f5af5a37821b3505a0eb.js b/docs/vendors.f5af5a37821b3505a0eb.js
diff --git a/index.d.ts b/index.d.ts
@@ -26,4 +26,4 @@ interface QRCodeProps {
 /**
  * The component
  */
-export function QRCode(props: QRCodeProps): React.ReactElement<{}>;
+export function QRCode(props: QRCodeProps & React.SVGProps): React.ReactElement<{}>;
diff --git a/src/components/qr-svg.js b/src/components/qr-svg.js
@@ -4,21 +4,30 @@ import PropTypes from 'prop-types';
 const QRCodeImpl = require('qr.js/lib/QRCode');
 const ErrorCorrectLevel = require('qr.js/lib/ErrorCorrectLevel');
 
+let warningFired = false;
+
 export function QRCode({
     value = '',
     size,
     level = 'L',
     bgColor = '#FFFFFF',
     fgColor = '#000000',
+    ...otherProps
 } = {}) {
+    if (size && !warningFired) {
+        /* eslint-disable no-console */
+        console.warn('The \'size\' prop is deprecated and will be removed in the next major version. Please use the \'style\', \'className\' or \'width\' props to size the code.');
+        /* eslint-enable no-console */
+        warningFired = true;
+    }
     // adapted from https://github.com/zpao/qrcode.react/blob/master/src/index.js
     const qrcode = new QRCodeImpl(-1, ErrorCorrectLevel[level]);
     qrcode.addData(value);
     qrcode.make();
 
     const cells = qrcode.modules;
 
-    return (<svg shapeRendering="crispEdges" viewBox={[0, 0, cells.length, cells.length].join(' ')} width={size}>
+    return (<svg shapeRendering="crispEdges" viewBox={[0, 0, cells.length, cells.length].join(' ')} width={size} {...otherProps}>
         {
             cells.map((row, rowIndex) =>
                 row.map((cell, colIndex) => (

diff --git a/tests/typescript/index.tsx b/tests/typescript/index.tsx
@@ -10,6 +10,7 @@ class Demo extends React.Component<IDemoProps, {}> {
         return <div>
             <QRCode bgColor="#FFFFFF" fgColor="#000000" level="M" size={512} value={this.props.text} />
             <QRCode value="Only value here" />
+            <QRCode value="Style here" style={{ width: 250 }} />
         </div>;
     }
 }