- Category
- Developer Tools
- Rank
- No. 876Tools index
- Pricing
- Open Source
- Type
- TOOL
- Builder
- wevm
- GitHub
- 99 stars
- Latest release
- cuer@0.0.3
- Date
About
QR Code component for React, from the wevm team.
What it does
Cuer turns a text value into a scalable SVG QR code inside React. Its default component draws rounded cells and finder marks, while an optional central arena can hold an image or any React content.
Why it's ranked here
Cuer has a focused, unusually composable design. The simple interface handles ordinary QR rendering, while separate root, cell, finder, and arena pieces allow substantial visual control without replacing the encoding layer.
What's good
The output inherits the current text color and defaults to full available size. Cells and finder marks expose independent radius and fill controls. Adding central content automatically reserves space and raises low error correction to medium.
Tradeoffs
This is an opinionated React renderer, not a general QR toolkit. The public entry exposes one component family, and central content uses an SVG foreign object. The supplied material shows rendering and encoding, but no scanning or decoding interface.
How to use it well
Use it in React products that need branded, responsive QR graphics with modest styling control. Start with the single component, then compose its visual parts for logos or custom geometry. Choose another tool when you need scanning, decoding, or a framework-neutral interface.
Technical notes+
src/index.ts exports Cuer from src/Cuer.tsx. Cuer.Root memoizes QR generation, supplies geometry through React context, and renders an SVG. Cuer.Cells consolidates active modules into one SVG path, omitting finder and arena regions. Cuer.Arena embeds React content through foreignObject. src/QrCode.ts calls encodeQR from qr with raw output, removes the required one-cell border, and exposes error-correction and version options. scripts/prepublish.ts generates ESM and declaration export metadata before publication.
Observed
- License
- MIT
- Primary language
- TypeScript with React TSX
- Install surface
- Published for installation as the npm package cuer
- Module format
- ES modules with JavaScript and TypeScript declaration exports
- Interface
- React component library rendering SVG QR codes
- Public surface
- The main entry exports the Cuer component family
- Rendering platform
- Uses React, SVG, and SVG foreignObject for central content
Read from package.json, src/index.ts, src/Cuer.tsx, src/QrCode.ts, site/vite.config.ts, scripts/prepublish.ts, scripts/preconstruct.ts, playground/vite.config.ts, scripts/build:contracts.ts, site/src/App.tsx, site/src/main.tsx, playground/src/App.tsx, site/src/vite-env.d.ts, playground/src/main.tsx, scripts/utils/exports.ts.
What it can do
Generate QR codes
Data or text string → QR code image component
Render QR codes in React applications
React component props with data → Visual QR code element in UI
Customize QR code appearance
Style configuration options → Styled QR code component
Integrate QR code functionality into React projects
React application codebase → QR code generation capability within app
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.
