https://github.com/lintangwisesa/react-qr-generator-scanner

A simple ⚛️ React app to generate & scan QR code
https://github.com/lintangwisesa/react-qr-generator-scanner

qrcode qrcode-generator qrcode-reader qrcode-scanner react

Last synced: 4 days ago
JSON representation

A simple ⚛️ React app to generate & scan QR code

• Host: GitHub
• URL: https://github.com/lintangwisesa/react-qr-generator-scanner
• Owner: LintangWisesa
• Created: 2020-11-09T09:59:38.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2021-03-22T02:34:53.000Z (over 3 years ago)
• Last Synced: 2023-03-07T10:27:04.172Z (over 1 year ago)
• Topics: qrcode, qrcode-generator, qrcode-reader, qrcode-scanner, react
• Language: JavaScript
• Homepage: https://www.youtube.com/watch?v=vIXvBcrqKqg
• Size: 787 KB
• Stars: 39
• Watchers: 1
• Forks: 28
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![simplinnovation](https://4.bp.blogspot.com/-f7YxPyqHAzY/WJ6VnkvE0SI/AAAAAAAADTQ/0tDQPTrVrtMAFT-q-1-3ktUQT5Il9FGdQCLcB/s350/simpLINnovation1a.png)

# React QR Code Scanner & Generator

A simple React application to generate & scan Quick Response code (QR code). 

- __Demo__:

  Click the following picture to see the demo video:

  [![Video](https://img.youtube.com/vi/vIXvBcrqKqg/0.jpg)](https://youtu.be/vIXvBcrqKqg)

  

- __Clone this repo__:

  ```bash

  $ git clone https://github.com/LintangWisesa/React-QR-Scanner-Generator.git

  $ npm i

  $ npm start

  ```

- __React UI Kit: [Material UI](https://material-ui.com/)__

    Install Material UI core:

    ```bash

    $ npm i @material-ui/core @material-ui/icons

    ```

- __Icons: [Material Design Icons](https://materialdesignicons.com/)__

    Install Material Design Icons:

    ```bash

    $ npm i @mdi/react @mdi/js @mdi/font

    ```

    Add these lines on `./public/index.html` head:

    ```html

    

    

    

    

    ```

- __QR Generator: [qrcode.react](https://www.npmjs.com/package/qrcode.react)__

    Install `qrcode.react`:

    ```bash

    $ npm i qrcode.react

    ```

- __QR Scanner: [react-qr-reader](https://www.npmjs.com/package/react-qr-reader)__

    Install `react-qr-reader`:

    ```bash

    $ npm i react-qr-reader

    ```

- __Preview__

  Home Page

  ![./img/Home.png](./img/Home.png)

  QR Generator Page

  

  ![./img/QRgenerator.png](./img/QRgenerator.png)

  QR Scanner Page

  

  ![./img/QRscanner.png](./img/QRscanner.png)



#### 🍔 Lintang Wisesa