qrlinkgen
v1.0.0
Published
A lightweight floating QR code React component for mobile testing — scan to open your dev server URL on any device instantly
Maintainers
dushyant_singhReadme
qrlinkgen
A lightweight floating QR code React component for mobile testing — scan to open your dev server URL on any device instantly. No manual URL typing, no copy-pasting IP addresses.
Why qrlinkgen?
Testing on real mobile devices during development means finding your machine's local IP, typing it on your phone, and doing it again every time the port changes. qrlinkgen eliminates that friction — just drop in one component and scan.
- One line of code — add
<DevQrCode />and you're done - Auto-detects your dev URL — picks up
protocol,hostname, andportfromwindow.location - Custom URL support — override with any URL via the
customUrlprop - Zero CSS dependencies — all styles are inline, no Tailwind / CSS-in-JS / stylesheets required
- Tiny footprint — minimal bundle impact for a dev-time utility
- Fully typed — written in TypeScript with exported types
- React 18 & 19 — works with both versions
- Framework agnostic — works with Vite, Next.js, Create React App, Remix, and any React setup
Installation
npm install qrlinkgenyarn add qrlinkgenpnpm add qrlinkgenPeer dependency: Requires
react>= 18 andreact-dom>= 18 (already in your project).
Quick Start
import { DevQrCode } from "qrlinkgen"
function App() {
return (
<div>
<h1>My App</h1>
<DevQrCode />
</div>
)
}A small QR button appears in the top-left corner. Click it to reveal the QR code. Scan it with your phone — done.
Usage
Auto-detected URL (default)
The component reads window.location and generates a QR code for the current page URL. This is the most common use case when you're running a local dev server and want to open it on a mobile device connected to the same network.
<DevQrCode />Custom URL
Pass a specific URL to encode:
<DevQrCode customUrl="https://192.168.1.10:3000/dashboard" />Development-only rendering
Wrap with an environment check so it never ships to production:
{process.env.NODE_ENV === "development" && <DevQrCode />}Next.js
"use client"
import { DevQrCode } from "qrlinkgen"
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
{children}
{process.env.NODE_ENV === "development" && <DevQrCode />}
</body>
</html>
)
}Vite
import { DevQrCode } from "qrlinkgen"
function App() {
return (
<>
{/* your app */}
{import.meta.env.DEV && <DevQrCode />}
</>
)
}API
<DevQrCode />
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| customUrl | string \| undefined | — | URL to encode in the QR code. If omitted, the current page URL is auto-detected from window.location. |
Exported Types
import type { DevQRCodeProps } from "qrlinkgen"How It Works
- A small dark QR button appears fixed in the top-left corner of the viewport (hidden on screens < 640px).
- Click it to expand a floating card showing the QR code and the encoded URL.
- Use the minimize button to collapse the card, or the close button to dismiss it entirely.
- Scan the QR code with any phone camera or QR scanner app to open the URL.
Browser Support
Works in all modern browsers (Chrome, Firefox, Safari, Edge). The responsive toggle uses window.matchMedia.
License
ISC
Contributing
Issues and pull requests are welcome.