Skip to content

Commit 44387ef

Browse files
JounQinJounQin
committed
feat(qrious): react hooks based qrious component
1 parent bdb25bc commit 44387ef

File tree

14 files changed

+161
-20
lines changed

14 files changed

+161
-20
lines changed

‎README.md

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,19 +40,20 @@
4040

4141
This repository is a monorepo managed by [Lerna][] what means we actually publish several packages to npm from same codebase, including:
4242

43-
| Package | Description | Version | Peer Dependencies | Dependencies |
44-
| ------------------------------------------ | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
45-
| [`react-rx`](/packages/react-rx) | 👁️ RxJS integration for React. | [![npm](https://img.shields.io/npm/v/@rxts/react-rx.svg)](https://www.npmjs.com/package/@rxts/react-rx) | [![David Peer](https://img.shields.io/david/peer/rx-ts/react-rx.svg?path=packages/react-rx)](https://david-dm.org/rx-ts/react-rx?path=packages/react-rx&type=peer) | [![David](https://img.shields.io/david/rx-ts/react-rx.svg?path=packages/react-rx)](https://david-dm.org/rx-ts/react-rx?path=packages/react-rx) |
46-
| [`react-storage`](/packages/react-storage) | 🔥 React hooks for using localStorage/sessionStorage | [![npm](https://img.shields.io/npm/v/@rxts/react-storage.svg)](https://www.npmjs.com/package/@rxts/react-storage) | [![David Peer](https://img.shields.io/david/peer/rx-ts/react-rx.svg?path=packages/react-storage)](https://david-dm.org/rx-ts/react-rx?path=packages/react-storage&type=peer) | [![David](https://img.shields.io/david/rx-ts/react-rx.svg?path=packages/react-storage)](https://david-dm.org/rx-ts/react-rx?path=packages/react-storage) |
43+
| Package | Description | Version | Peer Dependencies | Dependencies |
44+
| ------------------------------------------ | ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
45+
| [`react-rx`](/packages/react-rx) | 👁️ RxJS integration for React. | [![npm](https://img.shields.io/npm/v/@rxts/react-rx.svg)](https://www.npmjs.com/package/@rxts/react-rx) | [![David Peer](https://img.shields.io/david/peer/rx-ts/react-rx.svg?path=packages/react-rx)](https://david-dm.org/rx-ts/react-rx?path=packages/react-rx&type=peer) | [![David](https://img.shields.io/david/rx-ts/react-rx.svg?path=packages/react-rx)](https://david-dm.org/rx-ts/react-rx?path=packages/react-rx) |
46+
| [`react-qrious`](/packages/react-storage) | 🤳 A React component for QR code generation with qrious | [![npm](https://img.shields.io/npm/v/react-qrious.svg)](https://www.npmjs.com/package/react-qrious) | [![David Peer](https://img.shields.io/david/peer/rx-ts/react-rx.svg?path=packages/react-qrious)](https://david-dm.org/rx-ts/react-rx?path=packages/react-qrious&type=peer) | [![David](https://img.shields.io/david/rx-ts/react-rx.svg?path=packages/react-qrious)](https://david-dm.org/rx-ts/react-rx?path=packages/react-qrious) |
47+
| [`react-storage`](/packages/react-storage) | 🔥 React hooks for using localStorage/sessionStorage | [![npm](https://img.shields.io/npm/v/@rxts/react-storage.svg)](https://www.npmjs.com/package/@rxts/react-storage) | [![David Peer](https://img.shields.io/david/peer/rx-ts/react-rx.svg?path=packages/react-storage)](https://david-dm.org/rx-ts/react-rx?path=packages/react-storage&type=peer) | [![David](https://img.shields.io/david/rx-ts/react-rx.svg?path=packages/react-storage)](https://david-dm.org/rx-ts/react-rx?path=packages/react-storage) |
4748

4849
## Install
4950

5051
```sh
5152
# yarn
52-
yarn add @rxts/react-{rx,storage}
53+
yarn add @rxts/react-{rx,qrious,storage}
5354

5455
# npm
55-
npm i @rxts/react-{rx,storage}
56+
npm i @rxts/react-{rx,qrious,storage}
5657
```
5758

5859
## Changelog

‎package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@rxts/react",
33
"version": "0.1.0",
4-
"description": "React",
4+
"description": "Make React great again with RxTS.",
55
"repository": "git@github.com:rx-ts/react.git",
66
"author": "JounQin <admin@1stg.me>",
77
"license": "MIT",
@@ -28,13 +28,14 @@
2828
"@1stg/husky-config": "^0.3.0",
2929
"@1stg/lint-staged": "^0.5.0",
3030
"@1stg/prettier-config": "^0.2.0",
31-
"@1stg/rollup-config": "^0.2.2",
31+
"@1stg/rollup-config": "^0.3.0",
3232
"@1stg/tsconfig": "^0.3.0",
3333
"@1stg/tslint-config": "^0.2.0",
3434
"@babel/core": "^7.5.5",
3535
"@commitlint/cli": "^8.1.0",
3636
"@commitlint/config-conventional": "^8.1.0",
3737
"@rxts/react-rx": "link:packages/react-rx/src",
38+
"@rxts/react-qrious": "link:packages/react-qrious/src",
3839
"@rxts/react-storage": "link:packages/react-storage/src",
3940
"@types/classnames": "^2.2.9",
4041
"@types/lodash": "^4.14.138",
@@ -57,6 +58,7 @@
5758
"parcel": "^1.12.3",
5859
"postcss": "^7.0.17",
5960
"prettier": "^1.18.2",
61+
"qrious": "^4.0.2",
6062
"react": "^16.9.0",
6163
"react-dom": "^16.9.0",
6264
"remark-preset-lint-markdown-style-guide": "^2.1.3",

‎packages/react-qrious/README.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
## Usage
2+
3+
```jsx
4+
// Component
5+
import ReactDOM from 'react-dom'
6+
import { QRious } from 'react-qrious'
7+
8+
ReactDOM.render(
9+
<QRious value="https://blog.1stg.me" />,
10+
document.getElementById('qrious'),
11+
)
12+
13+
// hooks
14+
import { useQrious } from 'react-qrious'
15+
16+
export const App = () => {
17+
const [value, setValue] = useState('https://blog.1stg.me')
18+
const [dataUrl, _qrious] = useQrious({ value })
19+
return (
20+
<div>
21+
dataUrl: {dataUrl}
22+
<img src={dataUrl} />
23+
<input onChange={e => setValue(e.currentTarget.value)} />
24+
</div>
25+
)
26+
}
27+
```
28+
29+
## Available Props
30+
31+
| prop | type | default value |
32+
| ----------------- | ------------------------------------ | ------------- |
33+
| `background` | `string` (CSS color) | `"#ffffff"` |
34+
| `backgroundAlpha` | `number` (0.1-1.0) | `1.0` |
35+
| `foreground` | `string` (CSS color) | `"#000"` |
36+
| `foregroundAlpha` | `number` (0.1-1.0) | `1.0` |
37+
| `level` | `string` ("L", "M", "Q", "H") | `"L"` |
38+
| `mime` | `string` ("image/png", "image/jpeg") | `"image/png"` |
39+
| `padding` | `number` | `null` |
40+
| `size` | `number` | `100` |
41+
| `value` | `string` |

‎packages/react-qrious/package.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "react-qrious",
3+
"version": "2.0.0",
4+
"description": "🤳 A React component for QR code generation with qrious",
5+
"repository": "git@github.com:rx-ts/react.git",
6+
"author": "JounQin <admin@1stg.me>",
7+
"license": "MIT",
8+
"main": "lib/cjs.js",
9+
"module": "lib/index.js",
10+
"browser": "lib/umd.js",
11+
"unpkg": "lib/umd.min.js",
12+
"es2015": "lib/es2015.js",
13+
"esm5": "lib/index.js",
14+
"fesm5": "lib/esm.js",
15+
"types": "lib/index.d.ts",
16+
"files": [
17+
"lib",
18+
"src",
19+
"qrious.d.ts"
20+
],
21+
"peerDependencies": {
22+
"qrious": "^4.0.0",
23+
"react": ">=16.8.0"
24+
},
25+
"sideEffects": false
26+
}

‎packages/react-qrious/qrious.d.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
declare module 'qrious' {
2+
namespace QRious {
3+
interface QRiousOptions {
4+
value: string
5+
background?: string
6+
backgroundAlpha?: number
7+
foreground?: string
8+
foregroundAlpha?: number
9+
level?: 'L' | 'M' | 'Q' | 'H'
10+
mime?: string
11+
padding?: number
12+
size?: number
13+
}
14+
}
15+
16+
class QRious {
17+
constructor(options?: QRious.QRiousOptions)
18+
toDataURL(mime?: string): string
19+
set(options?: QRious.QRiousOptions): void
20+
}
21+
22+
export = QRious
23+
}

‎packages/react-qrious/src/QRious.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { QRiousOptions } from 'qrious'
2+
import React, { HTMLAttributes } from 'react'
3+
4+
import { useQrious } from './use-qrious'
5+
6+
export type QriousProps = QRiousOptions &
7+
Omit<HTMLAttributes<HTMLImageElement>, 'src'>
8+
9+
export const QRious: React.FC<QriousProps> = props => {
10+
const [dataUrl] = useQrious(props)
11+
return <img {...props} src={dataUrl} />
12+
}

‎packages/react-qrious/src/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './QRious'
2+
export * from './use-qrious'

‎packages/react-qrious/src/use-qrious.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import QRious, { QRiousOptions } from 'qrious'
2+
import { useEffect, useState } from 'react'
3+
4+
export const useQrious = (options: QRiousOptions): [string, QRious] => {
5+
const [qrious] = useState(() => new QRious(options))
6+
const [dataUrl, setDataUrl] = useState(() => qrious.toDataURL(options.mime))
7+
useEffect(() => {
8+
qrious.set(options)
9+
setDataUrl(qrious.toDataURL(options.mime))
10+
}, [options, qrious])
11+
return [dataUrl, qrious]
12+
}

‎packages/react-qrious/tsconfig.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": "../../tsconfig.base.json",
3+
"compilerOptions": {
4+
"composite": true,
5+
"rootDir": "src",
6+
"outDir": "lib"
7+
}
8+
}

‎packages/react-rx/package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"module": "lib/index.js",
1010
"browser": "lib/umd.js",
1111
"unpkg": "lib/umd.min.js",
12+
"es2015": "lib/es2015.js",
1213
"esm5": "lib/index.js",
1314
"fesm5": "lib/esm.js",
1415
"types": "lib/index.d.ts",
@@ -17,8 +18,8 @@
1718
"src"
1819
],
1920
"peerDependencies": {
20-
"react": "^16.9.0",
21-
"rxjs": "^6.5.2"
21+
"react": ">=16.8.0",
22+
"rxjs": "^6.0.0"
2223
},
2324
"sideEffects": false
2425
}

0 commit comments

Comments
 (0)