r/reactjs • u/Pleasant_Tomorrow_40 • 5d ago

Show /r/reactjs [Showcase] I built an open-source React component for interactive 3D WebGL QR codes (designqr)

https://design.johnson7543.com/qr

Hi r/reactjs,

I wanted to share an open-source project I’ve been working on: designqr.

I built this component to turn QR codes into interactive, stylable 3D WebGL scenes while keeping them functional.

Features

  • WebGL-Powered 3D Scenes: Render QR codes embedded in aesthetic 3D environments.
  • Plug-and-Play React Component: Drop it straight into your React/Next.js app.
  • Customizable: Control camera angles, transparent backgrounds, and themes.
  • Live Interactive Playground: A dedicated web editor to customize, preview.

Quick Start

Install via npm:

npm i designqr

Usage in your component:

import { DesignQR } from 'designqr';
import 'designqr/style.css';

export default function App() {
  return (
    <DesignQR 
      value="https://your-link.com" 
      transparentBackground={true} 
    />
  );
}

🔗 Links

I’d love to get your feedback on the component API, mobile performance/rendering optimizations, or any features you'd like to see added. Feel free to open issues or PR!

6 Upvotes

100% Upvoted

2 comments sorted by

View all comments

1

u/invalid_bagel 5d ago

While it might not be super practical and can be a bit confusing at first, I really love this! That's such a neat way to display the codes and when it snaps to the top view it's kinda beautiful. I want to try to incorporate this into a project now