Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ndenicolais/qr-code-generator

QR Code Generator based on React with the integration of React Router
https://github.com/ndenicolais/qr-code-generator

qrcode qrcode-generator react react-router

Last synced: 1 day ago
JSON representation

QR Code Generator based on React with the integration of React Router

Awesome Lists containing this project

README

        

# QR Code Generator

> Author: Nicola De Nicolais

This code represents a simple QR Code Generator app based on React with the integration of React Router

## 💻 Technologies used

[](https://reactjs.org/)

React.js is a JavaScript library for creating user interfaces specific to single-page applications. It allows developers to create large web applications that can modify data without having to reload the page every time.

[](https://reactrouter.com/)

React Router is a complete JavaScript routing library that allows you to manage paths within a web application using so-called dynamic routing. It allows navigation between sections of various components in React applications and allows you to change the URL of the browser while keeping the user interface synchronized with the URL.
### Installation
```
npm install react-router-dom
yarn add react-router-dom
```

[](https://www.npmjs.com/package/qrcode.react)

A React component to generate QR codes for rendering to the DOM.

### Installation
```
npm install qrcode.react
yarn add qrcode.react
```

## 🛠️ Installation Steps
1) Clone this repository from GitHub
```
git clone https://github.com/ndenicolais/qr-code-generator
```

2) Change the working directory
```
cd qr-code-generator-main
```

3) Install dependencies
```
npm install
yarn
```

4) Run the application in developer mode
```
npm start
yarn start
```

5) Open [http://localhost:3000](http://localhost:3000) to view the application in the browser

## ⚙️ Customization

Customize the QR code's aspect according to your preferences by editing these parameters:

📄 App.js in 📁 src

|Parameter|Description|
|-|-|
|value |type of value to input|
|size |size of QR code's image|
|bgColor |color of QR code's background|
|fgColor |color of QR code's symbol|
|level |level of error correction: (L\M\Q\H)|
|includeMargine |to include QR code's margin|