Skip to content

Instantly share code, notes, and snippets.

@chalkpe
Last active March 26, 2021 08:49
Show Gist options
  • Save chalkpe/481d072c03252bde00e0df92b648d478 to your computer and use it in GitHub Desktop.
Save chalkpe/481d072c03252bde00e0df92b648d478 to your computer and use it in GitHub Desktop.
Lazy loaded version of `react-qr-code` npm package. Licensed under CC0.
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>
);
};
@chalkpe
Copy link
Author

chalkpe commented Mar 26, 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment