Vibeleaderboard
Index / tool
Visit cuer.dev
Category
Developer Tools
Rank
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 stringQR code image component

  • Render QR codes in React applications

    React component props with dataVisual QR code element in UI

  • Customize QR code appearance

    Style configuration optionsStyled QR code component

  • Integrate QR code functionality into React projects

    React application codebaseQR code generation capability within app

Tags

reactqr-codelibrarywevm

Tech Stack

Node.jsTypeScript

Comments (0)

No comments yet

Editorially curated, with community endorsements as a secondary signal. Corrections welcome.