@liquid-js/qr-code-styling 1.7.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +67 -63
  2. package/lib/index.d.ts +0 -3
  3. package/lib/qr-code-styling-node.js.map +1 -1
  4. package/lib/qr-code-styling.js +2 -2
  5. package/lib/qr-code-styling.js.map +1 -1
  6. package/package.json +24 -30
package/README.md CHANGED
@@ -1,4 +1,5 @@
1
1
  # QR Code Styling
2
+
2
3
  [![Version](https://img.shields.io/npm/v/qr-code-styling.svg)](https://www.npmjs.org/package/qr-code-styling)
3
4
 
4
5
  JavaScript library for generating QR codes with a logo and styling.
@@ -6,7 +7,9 @@ JavaScript library for generating QR codes with a logo and styling.
6
7
  Try it here https://qr-code-styling.com
7
8
 
8
9
  If you have issues / suggestions / notes / questions, please open an issue or contact me. Let's create a cool library together.
10
+
9
11
  ### Examples
12
+
10
13
  <p float="left">
11
14
  <img style="display:inline-block" src="https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/src/assets/facebook_example_new.png" width="240" />
12
15
  <img style="display:inline-block" src="https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/src/assets/qr_code_example.png" width="240" />
@@ -55,6 +58,7 @@ npm install qr-code-styling
55
58
  </body>
56
59
  </html>
57
60
  ```
61
+
58
62
  ---
59
63
 
60
64
  [**React example (Codesandbox)**](https://codesandbox.io/s/qr-code-styling-react-example-l8rwl?file=/src/App.js)
@@ -74,72 +78,73 @@ npm install qr-code-styling
74
78
  ### API Documentation
75
79
 
76
80
  #### QRCodeStyling instance
81
+
77
82
  `new QRCodeStyling(options) => QRCodeStyling`
78
83
 
79
- Param |Type |Description
80
- -------|------|------------
81
- options|object|Init object
84
+ | Param | Type | Description |
85
+ | ------- | ------ | ----------- |
86
+ | options | object | Init object |
82
87
 
83
88
  `options` structure
84
89
 
85
- Property |Type |Default Value|Description
86
- -----------------------|-------------------------|-------------|-----------------------------------------------------
87
- data |string | |The date will be encoded to the QR code
88
- image |string | |The image will be copied to the center of the QR code
89
- qrOptions |object | |Options will be passed to `qrcode-generator` lib
90
- imageOptions |object | |Specific image options, details see below
91
- dotsOptions |object | |Dots styling options
92
- cornersSquareOptions |object | |Square in the corners styling options
93
- cornersDotOptionsHelper|object | |Dots in the corners styling options
94
- backgroundOptions |object | |QR background styling options
90
+ | Property | Type | Default Value | Description |
91
+ | ----------------------- | ------ | ------------- | ----------------------------------------------------- |
92
+ | data | string | | The date will be encoded to the QR code |
93
+ | image | string | | The image will be copied to the center of the QR code |
94
+ | qrOptions | object | | Options will be passed to `qrcode-generator` lib |
95
+ | imageOptions | object | | Specific image options, details see below |
96
+ | dotsOptions | object | | Dots styling options |
97
+ | cornersSquareOptions | object | | Square in the corners styling options |
98
+ | cornersDotOptionsHelper | object | | Dots in the corners styling options |
99
+ | backgroundOptions | object | | QR background styling options |
95
100
 
96
101
  `options.qrOptions` structure
97
102
 
98
- Property |Type |Default Value
99
- --------------------|--------------------------------------------------|-------------
100
- typeNumber |number (`0 - 40`) |`0`
101
- mode |string (`'Numeric' 'Alphanumeric' 'Byte' 'Kanji'`)|
102
- errorCorrectionLevel|string (`'L' 'M' 'Q' 'H'`) |`'Q'`
103
+ | Property | Type | Default Value |
104
+ | -------------------- | -------------------------------------------------- | ------------- |
105
+ | typeNumber | number (`0 - 40`) | `0` |
106
+ | mode | string (`'Numeric' 'Alphanumeric' 'Byte' 'Kanji'`) |
107
+ | errorCorrectionLevel | string (`'L' 'M' 'Q' 'H'`) | `'Q'` |
103
108
 
104
109
  `options.imageOptions` structure
105
110
 
106
- Property |Type |Default Value|Description
107
- ------------------|---------------------------------------|-------------|------------------------------------------------------------------------------
108
- hideBackgroundDots|boolean |`true` |Hide all dots covered by the image
109
- imageSize |number |`0.4` |Coefficient of the image size. Not recommended to use ove 0.5. Lower is better
110
- margin |number |`0` |Margin of the image in blocks
111
- crossOrigin |string(`'anonymous' 'use-credentials'`)| |Set "anonymous" if you want to download QR code from other origins.
111
+ | Property | Type | Default Value | Description |
112
+ | ------------------ | --------------------------------------- | ------------- | ------------------------------------------------------------------------------ |
113
+ | hideBackgroundDots | boolean | `true` | Hide all dots covered by the image |
114
+ | imageSize | number | `0.4` | Coefficient of the image size. Not recommended to use ove 0.5. Lower is better |
115
+ | margin | number | `0` | Margin of the image in blocks |
116
+ | crossOrigin | string(`'anonymous' 'use-credentials'`) | | Set "anonymous" if you want to download QR code from other origins. |
112
117
 
113
118
  `options.dotsOptions` structure
114
119
 
115
- Property|Type |Default Value|Description
116
- --------|------------------------------------------------------------------------------|-------------|-------------------
117
- color |string |`'#000'` |Color of QR dots
118
- gradient|object | |Gradient of QR dots
119
- type |string (`'rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded'`)|`'square'` |Style of QR dots
120
+ | Property | Type | Default Value | Description |
121
+ | -------- | ------------------------------------------------------------------------------ | ------------- | ------------------- |
122
+ | color | string | `'#000'` | Color of QR dots |
123
+ | gradient | object | | Gradient of QR dots |
124
+ | type | string (`'rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded'`) | `'square'` | Style of QR dots |
120
125
 
121
126
  `options.backgroundOptions` structure
122
127
 
123
- Property|Type |Default Value
124
- --------|------|-------------
125
- color |string|`'#fff'`
126
- gradient|object|
128
+ | Property | Type | Default Value |
129
+ | -------- | ------ | ------------- |
130
+ | color | string | `'#fff'` |
131
+ | gradient | object |
127
132
 
128
133
  `options.cornersSquareOptions` structure
129
134
 
130
- Property|Type |Default Value|Description
131
- --------|-----------------------------------------|-------------|-----------------
132
- color |string | |Color of Corners Square
133
- gradient|object | |Gradient of Corners Square
134
- type |string (`'dot' 'square' 'extra-rounded'`)| |Style of Corners Square
135
+ | Property | Type | Default Value | Description |
136
+ | -------- | ----------------------------------------- | ------------- | -------------------------- |
137
+ | color | string | | Color of Corners Square |
138
+ | gradient | object | | Gradient of Corners Square |
139
+ | type | string (`'dot' 'square' 'extra-rounded'`) | | Style of Corners Square |
135
140
 
136
141
  `options.cornersDotOptions` structure
137
142
 
138
- Property|Type |Default Value|Description
139
- --------|-------------------------|-------------|-----------------
140
- color |string | |Color of Corners Dot
141
- gradient|object | |Gradient of Corners Dot
142
- type |string (`'dot' 'square'`)| |Style of Corners Dot
143
+ | Property | Type | Default Value | Description |
144
+ | -------- | ------------------------- | ------------- | ----------------------- |
145
+ | color | string | | Color of Corners Dot |
146
+ | gradient | object | | Gradient of Corners Dot |
147
+ | type | string (`'dot' 'square'`) | | Style of Corners Dot |
143
148
 
144
149
  Gradient structure
145
150
 
@@ -151,11 +156,11 @@ Gradient structure
151
156
 
152
157
  `options.cornersDotOptions.gradient`
153
158
 
154
- Property |Type |Default Value|Description
155
- ----------|----------------------------|-------------|---------------------------------------------------------
156
- type |string (`'linear' 'radial'`)|"linear" |Type of gradient spread
157
- rotation |number |0 |Rotation of gradient in radians (Math.PI === 180 degrees)
158
- colorStops|array of objects | |Gradient colors. Example `[{ offset: 0, color: 'blue' }, { offset: 1, color: 'red' }]`
159
+ | Property | Type | Default Value | Description |
160
+ | ---------- | ---------------------------- | ------------- | --------------------------------------------------------------------------------------- |
161
+ | type | string (`'linear' 'radial'`) | "linear" | Type of gradient spread |
162
+ | rotation | number | 0 | Rotation of gradient in radians (Math.PI === 180 degrees) |
163
+ | colorStops | array of objects | | Gradient colors. Example `[{ offset: 0, color: 'blue' }, { offset: 1, color: 'red' }]` |
159
164
 
160
165
  Gradient colorStops structure
161
166
 
@@ -167,31 +172,32 @@ Gradient colorStops structure
167
172
 
168
173
  `options.cornersDotOptions.gradient.colorStops[]`
169
174
 
170
- Property|Type |Default Value|Description
171
- --------|----------------|-------------|-----------------------------------
172
- offset |number (`0 - 1`)| |Position of color in gradient range
173
- color |string | |Color of stop in gradient range
175
+ | Property | Type | Default Value | Description |
176
+ | -------- | ---------------- | ------------- | ----------------------------------- |
177
+ | offset | number (`0 - 1`) | | Position of color in gradient range |
178
+ | color | string | | Color of stop in gradient range |
174
179
 
175
180
  #### QRCodeStyling methods
181
+
176
182
  `QRCodeStyling.append(container) => void`
177
183
 
178
- Param |Type |Description
179
- ---------|-----------|-----------
180
- container|DOM element|This container will be used for appending of the QR code
184
+ | Param | Type | Description |
185
+ | --------- | ----------- | -------------------------------------------------------- |
186
+ | container | DOM element | This container will be used for appending of the QR code |
181
187
 
182
188
  `QRCodeStyling.serialize() => Promise<string>`
183
189
 
184
190
  `QRCodeStyling.update(options) => void`
185
191
 
186
- Param |Type |Description
187
- -------|------|--------------------------------------
188
- options|object|The same options as for initialization
192
+ | Param | Type | Description |
193
+ | ------- | ------ | -------------------------------------- |
194
+ | options | object | The same options as for initialization |
189
195
 
190
196
  `QRCodeStyling.applyExtension(extension) => void`
191
197
 
192
- Param |Type |Description
193
- ---------|----------------------|------------------------------------------------------------------------------------------
194
- extension|(svg, options) => void|Extension is a function that takes svg and previously applied options and modifies an svg
198
+ | Param | Type | Description |
199
+ | --------- | ---------------------- | ----------------------------------------------------------------------------------------- |
200
+ | extension | (svg, options) => void | Extension is a function that takes svg and previously applied options and modifies an svg |
195
201
 
196
202
  `applyExtension` example
197
203
 
@@ -219,8 +225,6 @@ const extension = (svg, options) => {
219
225
 
220
226
  `QRCodeStyling.deleteExtension() => void`
221
227
 
222
-
223
228
  ### License
224
229
 
225
230
  [MIT License](https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/LICENSE). Copyright (c) 2021 Denys Kozak
226
-
package/lib/index.d.ts CHANGED
@@ -1,13 +1,10 @@
1
1
  import { ErrorCorrectionPercents } from "./constants/errorCorrectionPercents";
2
2
  import { QRCodeStyling } from "./core/QRCodeStyling";
3
3
  import * as browserUtils from "./tools/browserUtils";
4
- import * as types from "./types";
5
- export * from "./tools/browserUtils";
6
4
  export * from "./types";
7
5
  export { ErrorCorrectionPercents, QRCodeStyling };
8
6
  declare const _default: {
9
7
  QRCodeStyling: typeof QRCodeStyling;
10
8
  browserUtils: typeof browserUtils;
11
- types: typeof types;
12
9
  };
13
10
  export default _default;