A simple Qr-code-generator using react
Tags: qrcode, generator
Published: 2023-12-06 09:23:04

---
title: A simple Qr-code-generator using react
published: true
date: 2023-11-26 04:51:34 UTC
tags: QRCode,Generator
canonical_url: https://reactjsexample.com/a-simple-qr-code-generator-using-react/
---

# Qr-code-generator
 ![A simple Qr-code-generator using react](https://reactjsexample.com/content/images/2023/11/Code_2023-11_12-51-12.jpg)

![A simple Qr-code-generator using react](https://private-user-images.githubusercontent.com/120943267/238075177-a847b650-ef3d-4383-81d9-55898aaae458.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MDA5NzQ0NzcsIm5iZiI6MTcwMDk3NDE3NywicGF0aCI6Ii8xMjA5NDMyNjcvMjM4MDc1MTc3LWE4NDdiNjUwLWVmM2QtNDM4My04MWQ5LTU1ODk4YWFhZTQ1OC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBSVdOSllBWDRDU1ZFSDUzQSUyRjIwMjMxMTI2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDIzMTEyNlQwNDQ5MzdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hM2RhN2FkNzIxMzFiOGVjMTBiMGJhNjJjMTlkNjRjNWM4NjIxOWU3ZDFhNDEyMWE5MTliZDFmYTE1NWVhNDQ0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.4pXsc_-YHUBbGxZ71VogITe9JfaAnUlCOSQr4IXL9Io) ![A simple Qr-code-generator using react](https://private-user-images.githubusercontent.com/120943267/238075294-8ac4a629-5c3b-4075-968a-9ab2226d7161.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MDA5NzQ0NzcsIm5iZiI6MTcwMDk3NDE3NywicGF0aCI6Ii8xMjA5NDMyNjcvMjM4MDc1Mjk0LThhYzRhNjI5LTVjM2ItNDA3NS05NjhhLTlhYjIyMjZkNzE2MS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBSVdOSllBWDRDU1ZFSDUzQSUyRjIwMjMxMTI2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDIzMTEyNlQwNDQ5MzdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04ZmY2NDc3MjBhMDBhMzRjYjU5N2EzMjZlNjVjNmE5OTNmMDc1NmMwMjA0OTlmMGU5OTUyZDViNWIwZTYyODU2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.seBeuk_67RqlgV8U38PM7hXR1quKNkIoYiySy__sbUg)

This app generates Qr Code based on the entered URL. It is also possible to customize and download the generated Qr Code.

[View Demo](https://qr-code-generator-x1.netlify.app/)[View Github](https://github.com/X1-Il/Qr-code-generator)

## Overview

### About App

This app generates Qr Code based on the url entered.

Features:

- Light / dark mode theme switcher
- Qr Code 'X1-Il.netlify.app' default on loading
- Dynamically generating the Qr Code as you type the URL
- Dynamically update the color and background of the Qr Code based on the customization input entered by the user
- Dynamically update the customized image of the Qr Code
- Removes the custom image of the Qr Code
- You can download the `.png` of the generated Qr Code

### Links

- Repository URL: [github](https://github.com/X1-Il/Qr-code-generator)
- Live Site URL: [live site](https://qr-code-generator-x1.netlify.app/)

## My process

### Built with

- Semantic HTML5 markup
- CSS custom properties
- Grid & Flexbox
- [React](https://reactjs.org/) - Js library
- [QRCode.react](https://www.npmjs.com/package/qrcode.react) - Qr Code package
- [React Color](https://casesandberg.github.io/react-color/) - Color Pickers package

### Continued development

Future features:

- Serverless database connection
- Authentication with login
- Save the Qr Code generated

### Useful resources

- [QRCode.react](https://www.npmjs.com/package/qrcode.react)
- [React Color](https://casesandberg.github.io/react-color/)

## Getting Started

In order to view this project locally, you need to make sure you clone this repository and install it's dependencies.

### System Requirements

- [git][[https://git-scm.com/](https://git-scm.com/)] 2.31.1 or greater
- [node][[https://nodejs.org/en/](https://nodejs.org/en/)] 14.16.1 or greater
- [npm][[https://nodejs.org/en/](https://nodejs.org/en/)] 8.7.0 or greater

To check which versions you have installed you can run these commands:

```
git --version
node --version
npm --version

```

If requirements above are not installed in your computer, you'll need to install them. By clicking on them you can go to their website, which can lead you the way.

### Installation

- Clone the repository

```
git clone https://github.com/X1-Il/Qr-code-generator.git
```

- Navigate to repository folder

```
cd Qr-code-generator
```

- Install npm packages

```
npm install
```

- To run the app in the development mode run in the project directory:

```
npm start
```

### Bugs

Please feel free to create an issue if you see a bug or something unexpected in the app.

### Contributing

- Fork the Project
- Create your Feature Branch (`git checkout -b feature/yourFeature`)
- Commit your Changes (`git commit -m 'Brief explanation of feature`')
- Push to the Branch (`git push origin feature/yourFeature`)
- Open a Pull Request

## License

[MIT license](https://github.com/X1-Il/Qr-code-generator/blob/master/LICENSE)

## Author

### X1-Il portfolio - [X1-Il](https://x1-il.netlify.app)

Thanks by X1-Il