Lazy loaded version of `react-qr-code` npm package. Licensed under CC0.

LazyQRCode.tsx

import React from 'react';
import QRCode, { QRCodeProps } from 'react-qr-code';

interface LazyQRCodeProps extends QRCodeProps {
  style?: React.CSSProperties;
  children?: React.ReactNode;
}

export default ({ size, style, children, ...props }: LazyQRCodeProps) => {
  const [loaded, setLoaded] = React.useState(false);
  React.useEffect(() => void setTimeout(() => setLoaded(true), 0), []);

  return (
    <div style={{ ...style, width: size + 'px', height: size + 'px' }}>
      {loaded ? <QRCode size={size} {...props} /> : children}
    </div>
  );
};

Preview