Skip to content

Commit

Permalink
feat: prevent cumulative layout shift
Browse files Browse the repository at this point in the history
  • Loading branch information
marsidev committed Jan 10, 2023
1 parent 1e86658 commit a9e795e
Showing 1 changed file with 12 additions and 1 deletion.
13 changes: 12 additions & 1 deletion src/lib.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
onError,
id,
autoResetOnExpire = true,
style,
...divProps
} = props
const config = options ?? {}
Expand Down Expand Up @@ -99,6 +100,9 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
'retry-interval': config.retryInterval ?? 8000
}

const containerWidth = config.size === 'compact' ? '130px' : '300px'
const containerHeight = config.size === 'compact' ? '120px' : '65px'

const onLoadScript = () => {
setScriptLoaded(true)
}
Expand Down Expand Up @@ -151,7 +155,14 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
[configJson, siteKey]
)

return <div ref={containerRef} id={containerId} {...divProps} />
return (
<div
ref={containerRef}
id={containerId}
style={{ width: containerWidth, height: containerHeight, ...style }}
{...divProps}
/>
)
})

Turnstile.displayName = 'Turnstile'
Expand Down

1 comment on commit a9e795e

@vercel
Copy link

@vercel vercel bot commented on a9e795e Jan 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

react-turnstile – ./

react-turnstile-marsi.vercel.app
react-turnstile-git-main-marsi.vercel.app
react-turnstile.vercel.app

Please sign in to comment.