Skip to content

Commit

Permalink
Tweak full example
Browse files Browse the repository at this point in the history
- better support conditional rendering of some props (cleaner when using
  default values)
- update actual components being rendered have the same prop values as
  displayed in codegen.
  • Loading branch information
zpao committed Oct 22, 2024
1 parent a510df1 commit 6721180
Showing 1 changed file with 20 additions and 22 deletions.
42 changes: 20 additions & 22 deletions examples/full.tsx
Original file line number Diff line number Diff line change
@@ -30,8 +30,7 @@ function FullDemo() {

function makeExampleCode(componentName: string) {
const imageSettingsCode = includeImage
? `
imageSettings={{
? `imageSettings={{
src: "${imageSrc}",
x: ${centerImage ? 'undefined' : imageX},
y: ${centerImage ? 'undefined' : imageY},
@@ -40,25 +39,24 @@ function FullDemo() {
opacity: ${imageOpacity},
excavate: ${imageExcavate},
}}`
: '';
const minVersionCode =
minVersion > 1
? `minVersion={${minVersion}}
`
: '';
const boostLevelCode = !boostLevel
? `boostLevel={${boostLevel}}
`
: '';
: undefined;
const propLines = [
`value={"${value}"}`,
`title={"${title}"}`,
`size={${size}}`,
`bgColor={"${bgColor}"}`,
`fgColor={"${fgColor}"}`,
`level={"${level}"}`,
minVersion > 1 ? `minVersion={${minVersion}}` : undefined,
!boostLevel ? `boostLevel={${boostLevel}}` : undefined,
marginSize !== 0 ? `marginSize={${marginSize}}` : undefined,
imageSettingsCode,
]
.filter(Boolean)
.join('\n ');
return `import {${componentName}} from 'qrcode.react';
<${componentName}
value={"${value}"}
title={"${title}"}
size={${size}}
bgColor={"${bgColor}"}
fgColor={"${fgColor}"}
level={"${level}"}
${minVersionCode}${boostLevelCode}marginSize={${marginSize}}${imageSettingsCode}
${propLines}
/>`;
}
const svgCode = makeExampleCode('QRCodeSVG');
@@ -71,9 +69,9 @@ function FullDemo() {
fgColor,
bgColor,
level,
marginSize,
minVersion,
boostLevel,
marginSize: marginSize > 0 ? marginSize : undefined,
minVersion: minVersion > 1 ? minVersion : undefined,
boostLevel: !boostLevel || undefined,
imageSettings: includeImage
? {
src: imageSrc,

0 comments on commit 6721180

Please # to comment.