This project is a QR Code Generator built using React. It allows users to input text, select the background colour, and adjust the dimensions to generate a QR code. The generated QR code can be downloaded as well.
- Input text to generate a QR code
- Select background colour for the QR code
- Adjust dimensions of the QR code
- Download the generated QR code
- React
- Tailwind CSS
- Clone the repository:
- git clone https://github.com/arun-webcode/Reactjs-mini-projects/edit/main/01-qrcode-gen
- cd qr-code-generator
- npm install
- npm run dev
Note - Remember to add this code on tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
darkMode: "class",
theme: {
extend: {},
},
plugins: [],
};- Open the application in your browser.
- Enter the text you want to encode in the QR code.
- Select the background colour using the colour picker.
- Adjust the dimensions using the range input.
- Click on the "Generate" button to create the QR code.
- Download the generated QR code by clicking the "Download" button.
##Project Structure src/ │ ├── components/ │ ├── Header.jsx │ ├── InputBox.jsx │ ├── ExtraOptions.jsx │ ├── App.jsx ├── index.css ├── main.jsx └── index.html
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
Made By - @Arun-webcode
