How to get widget id?

[VIEWVIEWVIEW]

According to the docs the render function will return the widget-id:

If the invocation is successful, the function returns a widgetId (string). If the invocation is unsuccessful, the function returns undefined.

-- https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/

I need this widgetId to call window.turnstile.reset(widgetId) in order to reset the captcha.

[Le0Developer]

Would you be fine with the onload callback including the widgetId?

function TurnstileTest() {
    const [widgetId, setWidgetId] = useState(null);
    setEffect(() => {
        if(!widgetId) return;
        // reset widget after 10s
        const timeoutId = setTimeout(() => {
            turnstile.reset(widgetId);
        }, 10000)
       return () => clearTimeout(timeoutId)
    }, [widgetId])
    return <Turnstile
        sitekey="..."
        onVerify={...}
        onLoad={widgetId => setWidgetId(widgetId)}
    />
}

Do note that the onLoad callback can be called multiple times if the widget has to be re-created because an important prop changes (theme, sitekey, action etc).

[VIEWVIEWVIEW]

Would you be fine with the onload callback including the widgetId?

Yes, that would be fine :)

[Le0Developer]

v1.0.4 has been published on NPM.