add ref argument for custom ref (closes #7)

Author: Le0Developer

HISTORY.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Support for the new `onTimeout` callback
 - `autoResetOnExpire` for automatically resetting the Turnstile widget once the token expires
 - `retry` & `retryInterval`
+- custom `ref` argument for using your own ref (#7)
 
 ## [1.0.5] - 2022-10-22
 

README.md

@@ -45,6 +45,7 @@ Turnstile takes the following arguments:
 | retryInterval     | number  | interval of retries in ms                                |
 | autoResetOnExpire | boolean | automatically reset the widget when the token expires    |
 | id                | string  | id of the div                                            |
+| ref               | Ref     | custom react ref for the div                             |
 | className         | string  | passed to the div                                        |
 | style             | object  | passed to the div                                        |
 

src/index.tsx

@@ -43,6 +43,7 @@ let ensureTurnstile: () => Promise<any>;
 
 export default function Turnstile({
   id,
+  ref: userRef,
   className,
   style,
   sitekey,
@@ -62,9 +63,11 @@ export default function Turnstile({
   onExpire,
   onTimeout,
 }: TurnstileProps) {
-  const ref = useRef<HTMLDivElement | null>(null);
+  const ownRef = useRef<HTMLDivElement | null>(null);
   const inplaceState = useState<TurnstileCallbacks>({ onVerify })[0];
 
+  const ref = userRef ?? ownRef;
+
   useEffect(() => {
     if (!ref.current) return;
     let cancelled = false;
@@ -144,6 +147,7 @@ interface TurnstileProps extends TurnstileCallbacks {
   autoResetOnExpire?: boolean;
 
   id?: string;
+  ref?: React.MutableRefObject<HTMLDivElement>;
   className?: string;
   style?: React.CSSProperties;
 }