v2 planning

[Le0Developer]

Hi there.

I made this library over 2.5 years ago when I wasn't deeply familiar with React and it shows in some design decisions (eg. userRef instead of ref because I couldn't figure out how to type it correctly).

Here's my ideas for v2:

1. Use ref instead of userRef and make it properly typed (breaking change)

export function FormCaptcha({ cdata }: { cdata: string }) {
  const turnstile = useTurnstile();
  const ref = useRef<HTMLDivElement>();
  useEffect(() => {
   turnstile.reset(ref);
  }, []);
  return (
    <Turnstile sitekey="..." cData={cdata} action="login-form" ref={ref} />
  )
}

2. Expand useTurnstile hook to cover more use cases:

export function FormCaptcha({ cdata }: { cdata: string }) {
  const turnstile = useTurnstile({
    sitekey: "...",
    cData: cdata,
    action: "login-form"
  });
  useEffect(() => {
    // this will work even with multiple instances of turnstile:
    turnstile.reset()
  }, []);
  return (
    <turnstile.Render />
  )
}

useTurnstile would either return a "BoundTurnstile" instance (with .Render component) if it's called with arguments or return the normal Turnstile API if not for backwards compatibility.

3. remove "boundTurnstileObject" passed to callbacks (breaking change)
4. internal: move away from useState hack and instead use useRef
5. cleanup onSuccess/onVerify (breaking change)
6. move fixedSize option to its own component (breaking change)

export function FormCaptcha() {
  const turnstile = useTurnstile({
    sitekey: "...",
    action: "login-form",
    size: "compact"
  });
  return (
    <turnstile.Container className="bg-blue">
      <turnstile.Render />
    </turnstile.Container>
  )
}

export function FormCaptcha2() {
  return (
    <TurnstileContainer size="compact" className="bg-blue">
      <Turnstile />
    </TurnstileContainer>
  )
}

7. either automatically detect if we are being SSR'ed and thrown an error or detect it and only render on the client-side (might be breaking)
8. add a "TurnstileProvider" or similar which lets you preload the external Turnstile api.js

[etal2]

Hate to be that guy but is there any point in version 2 when @marsidev/react-turnstile exists? There does not seem to be any meaningful difference between these libraries and their interface is almost the same. (I'm using this library just because of a project with an old react version not supported by the other one)

[Le0Developer]

I have not looked at @marsidev/react-turnstile in 2+ years. If there are similarities that's simply because there's not much magic, but I do think these changes will make this package more flexible and improve DX.
What other packages are doing is not much of my concern 🤷