├── .gitignore
├── README.md
├── debug.log
├── img
├── Home.png
├── QRgenerator.png
└── QRscanner.png
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
├── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── pages
│ ├── Home.js
│ ├── QRgenerator.js
│ └── QRscanner.js
├── reportWebVitals.js
└── setupTests.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # React QR Code Scanner & Generator
4 |
5 | A simple React application to generate & scan Quick Response code (QR code).
6 |
7 | - __Demo__:
8 |
9 | Click the following picture to see the demo video:
10 |
11 | [](https://youtu.be/vIXvBcrqKqg)
12 |
13 | - __Clone this repo__:
14 |
15 | ```bash
16 | $ git clone https://github.com/LintangWisesa/React-QR-Scanner-Generator.git
17 | $ npm i
18 | $ npm start
19 | ```
20 |
21 | - __React UI Kit: [Material UI](https://material-ui.com/)__
22 |
23 | Install Material UI core:
24 | ```bash
25 | $ npm i @material-ui/core @material-ui/icons
26 | ```
27 |
28 | - __Icons: [Material Design Icons](https://materialdesignicons.com/)__
29 |
30 | Install Material Design Icons:
31 | ```bash
32 | $ npm i @mdi/react @mdi/js @mdi/font
33 | ```
34 |
35 | Add these lines on `./public/index.html` head:
36 | ```html
37 |
38 |
39 |
40 |
41 | ```
42 |
43 | - __QR Generator: [qrcode.react](https://www.npmjs.com/package/qrcode.react)__
44 |
45 | Install `qrcode.react`:
46 | ```bash
47 | $ npm i qrcode.react
48 | ```
49 |
50 | - __QR Scanner: [react-qr-reader](https://www.npmjs.com/package/react-qr-reader)__
51 |
52 | Install `react-qr-reader`:
53 | ```bash
54 | $ npm i react-qr-reader
55 | ```
56 |
57 | - __Preview__
58 |
59 | Home Page
60 |
61 | 
62 |
63 | QR Generator Page
64 |
65 | 
66 |
67 | QR Scanner Page
68 |
69 | 
70 |
71 |
72 |
73 | #### 🍔 Lintang Wisesa
74 |
75 |
76 |
77 |
78 | 
79 |
80 |
81 |
82 | 
83 |
84 |
85 |
86 | 
87 |
88 |
89 |
90 | 
91 |
92 |
93 |
94 | 
95 |
96 |
97 |
98 | 
99 |
100 |
101 |
102 | 
103 |
104 |
105 |
106 | 
107 |
108 |
--------------------------------------------------------------------------------
/debug.log:
--------------------------------------------------------------------------------
1 | [1110/083347.714:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
2 |
--------------------------------------------------------------------------------
/img/Home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LintangWisesa/React-QR-Generator-Scanner/4536f121ed474ee610c582132f9806db3df5ceed/img/Home.png
--------------------------------------------------------------------------------
/img/QRgenerator.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LintangWisesa/React-QR-Generator-Scanner/4536f121ed474ee610c582132f9806db3df5ceed/img/QRgenerator.png
--------------------------------------------------------------------------------
/img/QRscanner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LintangWisesa/React-QR-Generator-Scanner/4536f121ed474ee610c582132f9806db3df5ceed/img/QRscanner.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react_qrcode",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@material-ui/core": "^4.11.0",
7 | "@material-ui/icons": "^4.9.1",
8 | "@mdi/font": "^5.8.55",
9 | "@mdi/js": "^5.8.55",
10 | "@mdi/react": "^1.4.0",
11 | "@testing-library/jest-dom": "^5.11.4",
12 | "@testing-library/react": "^11.1.0",
13 | "@testing-library/user-event": "^12.1.10",
14 | "qrcode.react": "^1.0.0",
15 | "react": "^17.0.1",
16 | "react-dom": "^17.0.1",
17 | "react-qr-reader": "^2.2.1",
18 | "react-router-dom": "^5.2.0",
19 | "react-scripts": "4.0.0",
20 | "web-vitals": "^0.2.4"
21 | },
22 | "scripts": {
23 | "start": "react-scripts start",
24 | "build": "react-scripts build",
25 | "test": "react-scripts test",
26 | "eject": "react-scripts eject"
27 | },
28 | "eslintConfig": {
29 | "extends": [
30 | "react-app",
31 | "react-app/jest"
32 | ]
33 | },
34 | "browserslist": {
35 | "production": [
36 | ">0.2%",
37 | "not dead",
38 | "not op_mini all"
39 | ],
40 | "development": [
41 | "last 1 chrome version",
42 | "last 1 firefox version",
43 | "last 1 safari version"
44 | ]
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LintangWisesa/React-QR-Generator-Scanner/4536f121ed474ee610c582132f9806db3df5ceed/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 |
28 |
29 | React App
30 |
31 |
32 |
33 |
34 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LintangWisesa/React-QR-Generator-Scanner/4536f121ed474ee610c582132f9806db3df5ceed/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LintangWisesa/React-QR-Generator-Scanner/4536f121ed474ee610c582132f9806db3df5ceed/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | pointer-events: none;
8 | }
9 |
10 | @media (prefers-reduced-motion: no-preference) {
11 | .App-logo {
12 | animation: App-logo-spin infinite 20s linear;
13 | }
14 | }
15 |
16 | .App-header {
17 | background-color: #ffffff;
18 | min-height: 100vh;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | justify-content: center;
23 | font-size: calc(10px + 2vmin);
24 | color: rgb(0, 0, 0);
25 | }
26 |
27 | .App-link {
28 | color: #61dafb;
29 | }
30 |
31 | @keyframes App-logo-spin {
32 | from {
33 | transform: rotate(0deg);
34 | }
35 | to {
36 | transform: rotate(360deg);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import './App.css';
2 | import {
3 | BrowserRouter as Router,
4 | Switch,
5 | Route,
6 | // Link
7 | } from "react-router-dom";
8 |
9 | import Home from './pages/Home'
10 | import QRgen from './pages/QRgenerator'
11 | import QRscan from './pages/QRscanner'
12 |
13 | function App() {
14 | return (
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
10 |
11 |
12 | React QR Code
13 |
14 |
15 |
16 |
17 |
18 |
27 |
28 |
29 |
30 |
31 |
40 |
41 |
42 |
43 |
44 |
45 | );
46 | }
47 |
48 | export default Home;
49 |
--------------------------------------------------------------------------------
/src/pages/QRgenerator.js:
--------------------------------------------------------------------------------
1 | import React, {useState} from 'react'
2 | import {Fab, TextField, TextareaAutosize, Grid} from '@material-ui/core'
3 | import {ArrowBack, GetApp} from '@material-ui/icons'
4 | import { Link } from "react-router-dom";
5 | import QRcode from 'qrcode.react'
6 |
7 | function QRgenerator() {
8 | const [qr, setQr] = useState('lintangwisesa');
9 | const handleChange = (event) => {
10 | setQr(event.target.value);
11 | };
12 | const downloadQR = () => {
13 | const canvas = document.getElementById("myqr");
14 | const pngUrl = canvas
15 | .toDataURL("image/png")
16 | .replace("image/png", "image/octet-stream");
17 | let downloadLink = document.createElement("a");
18 | downloadLink.href = pngUrl;
19 | downloadLink.download = "myqr.png";
20 | document.body.appendChild(downloadLink);
21 | downloadLink.click();
22 | document.body.removeChild(downloadLink);
23 | };
24 |
25 | return (
26 |
27 |
28 |
29 |
30 |
31 |
32 |
QR Generator
33 |
34 |
35 |
38 |
39 |
40 |
41 | {
42 | qr ?
43 |
:
49 |
No QR code preview
50 | }
51 |
52 |
53 | {
54 | qr ?
55 |
56 |
57 |
63 |
64 |
65 |
66 |
67 |
68 |
69 | :
70 | ''
71 | }
72 |
73 |
21 |
22 |
23 |
24 |
25 |
26 |
QR Scanner
27 |
28 |
29 |
30 |
36 |
37 |
38 |
39 |
45 |
46 |