├── .env.example ├── src ├── vite-env.d.ts ├── main.tsx ├── components │ ├── SelectField.tsx │ ├── CheckboxField.tsx │ ├── TextArea.tsx │ ├── InputField.tsx │ └── ImageUploadField.tsx ├── App.css ├── index.css ├── assets │ └── react.svg └── App.tsx ├── public ├── favicon.ico └── vite.svg ├── tsconfig.json ├── vite.config.ts ├── .dockerignore ├── .gitignore ├── index.html ├── docker-compose.yml ├── README.md ├── server.js ├── eslint.config.js ├── tsconfig.node.json ├── tsconfig.app.json ├── package.json └── Dockerfile /.env.example: -------------------------------------------------------------------------------- 1 | PORT=3000 -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gcoro/QRCodeCustomizer/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | base: '/QRCodeCustomizer/', // Adjust the base path for GitHub Pages 8 | }) 9 | -------------------------------------------------------------------------------- /src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.tsx' 5 | 6 | createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /.dockerignore: -------------------------------------------------------------------------------- 1 | Dockerfile 2 | .dockerignore 3 | .git 4 | .gitignore 5 | .gitattributes 6 | README.md 7 | .npmrc 8 | .prettierrc 9 | .eslintrc.cjs 10 | .graphqlrc 11 | .editorconfig 12 | .svelte-kit 13 | .vscode 14 | node_modules 15 | build 16 | package 17 | cli 18 | **/.env 19 | .env.example 20 | k8s 21 | .github 22 | .yarn 23 | .env -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | gcoro's qr code customizer xoxo 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3.3' 2 | networks: 3 | qrcode-customizer-network: 4 | name: qrcode-customizer-network 5 | ipam: 6 | driver: default 7 | services: 8 | qrcode-customizer: 9 | container_name: qrcode-customizer 10 | image: qrcode-customizer 11 | build: . 12 | env_file: .env 13 | ports: 14 | - '${PORT:-3000}:${PORT:-3000}' 15 | networks: 16 | - qrcode-customizer-network 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # QRCodeCustomizer 3 | 4 | Example project for react-qrcode-logo package. 5 | 6 | Built using React + TypeScript + Vite 7 | 8 | ## running the example 9 | 10 | Use node 22 11 | 12 | In the root folder of the project run 13 | 14 | `npm install` 15 | 16 | `npm run dev` 17 | 18 | The project will be reachable in your browser at localhost:5173 19 | 20 | ## online demo 21 | 22 | Try it here > [github pages](https://gcoro.github.io/QRCodeCustomizer/) 23 | -------------------------------------------------------------------------------- /src/components/SelectField.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | interface ISelectFieldProps { 4 | name: string; 5 | options: string[]; 6 | handleChange: (target: any) => void; 7 | } 8 | 9 | export const SelectField = ({ name, options, handleChange }: ISelectFieldProps) => { 10 | return ( 11 |
12 | 13 | 18 |
19 | ); 20 | } 21 | 22 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | margin: 0 auto; 3 | padding: 2rem; 4 | text-align: start; 5 | } 6 | 7 | .logo { 8 | height: 6em; 9 | padding: 1.5em; 10 | will-change: filter; 11 | transition: filter 300ms; 12 | } 13 | .logo:hover { 14 | filter: drop-shadow(0 0 2em #646cffaa); 15 | } 16 | .logo.react:hover { 17 | filter: drop-shadow(0 0 2em #61dafbaa); 18 | } 19 | 20 | @keyframes logo-spin { 21 | from { 22 | transform: rotate(0deg); 23 | } 24 | to { 25 | transform: rotate(360deg); 26 | } 27 | } 28 | 29 | @media (prefers-reduced-motion: no-preference) { 30 | a:nth-of-type(2) .logo { 31 | animation: logo-spin infinite 20s linear; 32 | } 33 | } 34 | 35 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | //simple express server to run frontend production build; 2 | const express = require("express"); 3 | const path = require("path"); 4 | const dotenv = require('dotenv'); 5 | 6 | const app = express(); 7 | const envFound = dotenv.config(); 8 | const port = process.env.PORT || 3000; 9 | 10 | app.use(express.static(path.join(__dirname, "build"))); 11 | 12 | app.get("/*", function (req, res) { 13 | res.sendFile(path.join(__dirname, "build", "index.html")); 14 | }); 15 | 16 | app.listen(port, () => { 17 | console.log(` 18 | ################################################ 19 | 🛡️ Server listening on port: ${port} 🛡️ 20 | ################################################ 21 | `) 22 | }); -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | import { globalIgnores } from 'eslint/config' 7 | 8 | export default tseslint.config([ 9 | globalIgnores(['dist']), 10 | { 11 | files: ['**/*.{ts,tsx}'], 12 | extends: [ 13 | js.configs.recommended, 14 | tseslint.configs.recommended, 15 | reactHooks.configs['recommended-latest'], 16 | reactRefresh.configs.vite, 17 | ], 18 | languageOptions: { 19 | ecmaVersion: 2020, 20 | globals: globals.browser, 21 | }, 22 | }, 23 | ]) 24 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2023", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "verbatimModuleSyntax": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "erasableSyntaxOnly": true, 21 | "noFallthroughCasesInSwitch": true, 22 | "noUncheckedSideEffectImports": true 23 | }, 24 | "include": ["vite.config.ts"] 25 | } 26 | -------------------------------------------------------------------------------- /src/components/CheckboxField.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | interface ICheckboxFieldProps { 4 | name: string; 5 | handleChange: (target: any) => void; 6 | } 7 | 8 | export const CheckboxField = ({ name, handleChange }: ICheckboxFieldProps) => { 9 | 10 | const handleCheckboxToggle = (e: any) => { 11 | const target = { 12 | name, 13 | value: e.target.checked 14 | } 15 | handleChange({ target }); 16 | }; 17 | 18 | return ( 19 |
20 | 25 | 26 |
27 | ); 28 | } -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 4 | "target": "ES2022", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2022", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "verbatimModuleSyntax": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "erasableSyntaxOnly": true, 23 | "noFallthroughCasesInSwitch": true, 24 | "noUncheckedSideEffectImports": true 25 | }, 26 | "include": ["src"] 27 | } 28 | -------------------------------------------------------------------------------- /src/components/TextArea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | interface ITextAreaProps { 4 | name: string; 5 | rows?: number; 6 | cols?: number; 7 | role?: string; 8 | defaultValue?: string | number; 9 | handleChange: (target: any) => void; 10 | hideLabel?: boolean; 11 | value?: string | number; 12 | } 13 | 14 | export const TextArea = ({ name, handleChange, role, rows, cols, defaultValue, hideLabel, value }: ITextAreaProps) => { 15 | return ( 16 |
17 | {!hideLabel && } 18 |