Creating a full React and CSS code for a QR code generator with class components and responsive design is quite extensive. However, I can provide you with a simplified example to get you started. Ensure you have the required dependencies installed (qrcode.react for QR code generation)
npm install qrcode.react
Example Code:
Qrcode.js file:
import React, { Component } from 'react';
import QRCode from 'qrcode.react';
import "./qrcode.css";
class QRCodeGenerator extends Component {
constructor(props) {
super(props);
this.state = {
inputValue: '',
generatedQRCode: '',
};
}
handleInputChange = (event) => {
this.setState({ inputValue: event.target.value });
};
generateQRCode = () => {
const { inputValue } = this.state;
this.setState({ generatedQRCode: inputValue });
};
render() {
const { inputValue, generatedQRCode } = this.state;
return (
<div className='QR-code'>
<input
type="text"
placeholder="Enter website or product link"
value={inputValue}
onChange={this.handleInputChange}
className='Link-box'
/>
<button onClick={this.generateQRCode}>Generate QR Code</button>
{generatedQRCode && (
<div className='qr-code-container' >
<p>Generated QR Code:</p>
<QRCode value={generatedQRCode} />
</div>
)}
</div>
);
}
}
export default QRCodeGenerator;
Qrcode.css file:
/* styles.css */
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
background-color: #f3eeee;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.QR-code{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.Link-box{
width: 100%;
padding: 20px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 15px;
background-color: white;
box-sizing: border-box;
}
button {
background-color: #28822b;
color: #ffffff;
padding: 17px 20px;
border: none;
font-weight: bold;
border-radius: 22px;
cursor: pointer;
}
button:hover {
background-color: #a2f6a6;
color: black;
}
app.js file:
import QRCodeGenerator from "./qrcode";
function App(){
return (
<QRCodeGenerator/>
);
}
export default App;
1.Constructor:
constructor(props) {
super(props);
this.state = {
inputValue: '',
generatedQRCode: '',
};
}
The constructor initializes the component's state with two properties: inputValue to store the input from the user and generatedQRCode to store the generated QR code.
2.handleInputChange:
handleInputChange = (event) => {
this.setState({ inputValue: event.target.value });
};
This function is an event handler for the input field. It updates the inputValue in the component's state whenever the user types something into the input field.
3.generateQRCode:
generateQRCode = () => {
const { inputValue } = this.state;
this.setState({ generatedQRCode: inputValue });
};
This function is called when the "Generate QR Code" button is clicked. It takes the current inputValue from the state and sets it as the generatedQRCode. In a real-world scenario, you would use a library like qrcode.react to generate a QR code from this value.
4.render:
render() {
const { inputValue, generatedQRCode } = this.state;
return (
<div>
<input
type="text"
placeholder="Enter website or product link"
value={inputValue}
onChange={this.handleInputChange}
/>
<button onClick={this.generateQRCode}>Generate QR Code</button>
{generatedQRCode && (
<div>
<p>Generated QR Code:</p>
<QRCode value={generatedQRCode} />
</div>
)}
</div>
);
}
The render method defines the structure of the component. It includes an input field for the user to enter a link, a button to trigger QR code generation, and a section to display the generated QR code if available.
The QR code is conditionally rendered using the generatedQRCode state. If there is a generated QR code, it displays a paragraph and the QR code using the qrcode.react library.
These functions together create a simple React component that allows users to input a link, generate a QR code, and display it on the page.
No comments:
Post a Comment