Support Modes

.eslintrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  extends: ['@bloomprotocol/eslint-config'],
+  rules: {
+    'no-bitwise': 'off',
+  },
+  parserOptions: {
+    project: './tsconfig.eslint.json',
+  },
+}

.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('@bloomprotocol/prettier-config')

.storybook/main.js

@@ -4,5 +4,15 @@ module.exports = {
   // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
   typescript: {
     check: true, // type-check stories during Storybook build
-  }
+    reactDocgen: false, // Disable for now https://github.com/styleguidist/react-docgen-typescript/issues/356
+  },
+  babel: async options => ({
+    ...options,
+    presets: [
+        ["@babel/preset-env", { shippedProposals: true }],
+        "@babel/preset-typescript",
+        ["@babel/preset-react", { runtime: "automatic" }],
+    ],
+    plugins: ["@babel/plugin-transform-typescript", ...options.plugins],
+})
 };

CHANGELOG.md

@@ -1,3 +1,13 @@
+# 3.3.0
+
+**Features**:
+
+- Support QR encoding modes
+
+**Misc**:
+
+- Bump dependencies
+
 # 3.2.0
 
 **Features**:

README.md

@@ -16,7 +16,7 @@ npm install --save @bloomprotocol/qr-react
 ## Usage
 
 ```tsx
-import { QR } from '@bloomprotocol/qr-react';
+import { QR } from '@bloomprotocol/qr-react'
 
 const MyComponent: React.FC = (props) => {
   return (
@@ -27,8 +27,8 @@ const MyComponent: React.FC = (props) => {
       height={256}
       width={256}
     />
-  );
-};
+  )
+}
 ```
 
 ![QR Example](https://github.com/hellobloom/qr-react/raw/master/assets/qr.png)
@@ -37,16 +37,45 @@ const MyComponent: React.FC = (props) => {
 
 In addition to the custom props outlined below you can provide any extra `<svg>` props.
 
-| Name    | Description                                                            | Type                                | Default                   |
-| ------- | ---------------------------------------------------------------------- | ----------------------------------- | ------------------------- |
-| data    | The data displayed in the QR code                                      | `Record<string, unknown> \| string` | -                         |
-| bgColor | Background color of the QR code                                        | `string`                            | `"#ffffff00"`             |
-| fgColor | Color of the QR code dots and eyes                                     | `string`                            | `"#6067f1"`               |
-| logo    | Configuration of the logo to be displayed in the center of the QR code | [See below](#logo-config)           | [See below](#logo-config) |
-| eyeAs   | Optional custom component used to render the eyes of the QR            | `React.ComponentType<QREyeProps>`   | -                         |
-| dotAs   | Optional custom component used to render the dots of the QR            | `React.ComponentType<QRDotProps>`   | -                         |
+| Name    | Description                                                            | Type                                                | Default                   |
+| ------- | ---------------------------------------------------------------------- | --------------------------------------------------- | ------------------------- |
+| data    | The data displayed in the QR code                                      | `DataConfig[] \| Record<string, unknown> \| string` | -                         |
+| bgColor | Background color of the QR code                                        | `string`                                            | `'#ffffff00'`             |
+| fgColor | Color of the QR code dots and eyes                                     | `string`                                            | `'#6067f1'`               |
+| ecLevel | The Error Correction Level to be applied                               | `'L' \| 'M' \| 'Q' \| 'H'`                          | `'L'`                     |
+| logo    | Configuration of the logo to be displayed in the center of the QR code | [See below](#logo-config)                           | [See below](#logo-config) |
+| eyeAs   | Optional custom component used to render the eyes of the QR            | `React.ComponentType<QREyeProps>`                   | -                         |
+| dotAs   | Optional custom component used to render the dots of the QR            | `React.ComponentType<QRDotProps>`                   | -                         |
 
-#### Logo Config
+### QR Encoding Modes
+
+If `props.data` is set to a `string` or `Record<string, unknown>` the default byte encoding will be used. If you want to control the mode or add multiple data sets you must set `props.data` to an array of `DataConfig` objects.
+
+| Name  | Description                         | Type                                             |
+| ----- | ----------------------------------- | ------------------------------------------------ |
+| mode  | The encoding mode to be used        | `'8BIT_BYTE' \| 'NUM' \| 'ALPHA_NUM' \| 'KANJI'` |
+| value | The value to be encoded into the QR | `string`                                         |
+
+```tsx
+import { QR } from '@bloomprotocol/qr-react'
+
+const MyComponent: React.FC = (props) => {
+  return (
+    <QR
+      data={[
+        {
+          mode: 'NUMERIC',
+          value: '123456',
+        },
+      ]}
+      height={256}
+      width={256}
+    />
+  )
+}
+```
+
+### Logo Config
 
 | Name    | Description                                     | Type     | Default               |
 | ------- | ----------------------------------------------- | -------- | --------------------- |
@@ -56,7 +85,7 @@ In addition to the custom props outlined below you can provide any extra `<svg>`
 | opacity | Opacity of the image                            | `number` | `1`                   |
 
 ```tsx
-import { QR } from '@bloomprotocol/qr-react';
+import { QR } from '@bloomprotocol/qr-react'
 
 const MyComponent: React.FC = (props) => {
   return (
@@ -70,6 +99,6 @@ const MyComponent: React.FC = (props) => {
       height={256}
       width={256}
     />
-  );
-};
+  )
+}
 ```