main 🧊 fix double click

Author: debabin

packages/core/src/bundle/hooks/useActiveElement/useActiveElement.js

@@ -8,6 +8,8 @@ import { useEffect, useState } from 'react';
  *
  * @example
  * const activeElement = useActiveElement();
+ *
+ * @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useActiveElement.html}
  */
 export const useActiveElement = () => {
   const [activeElement, setActiveElement] = useState(null);

packages/core/src/bundle/hooks/useDoubleClick/useDoubleClick.js

@@ -24,6 +24,8 @@ const DEFAULT_THRESHOLD_TIME = 300;
  *
  * @example
  * const ref = useDoubleClick(() => console.log('double clicked'));
+ *
+ * @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useDoubleClick.html}
  */
 export const useDoubleClick = (...params) => {
   const target = isTarget(params[0]) ? params[0] : undefined;

packages/core/src/bundle/hooks/useWindowFocus/useWindowFocus.js

@@ -8,6 +8,8 @@ import { useEffect, useState } from 'react';
  *
  * @example
  * const focused = useWindowFocus();
+ *
+ * @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useWindowFocus.html}
  */
 export const useWindowFocus = () => {
   const [focused, setFocused] = useState(false);

packages/core/src/hooks/useActiveElement/useActiveElement.demo.tsx

@@ -6,11 +6,11 @@ const Demo = () => {
 
   return (
     <>
-      <div className='grid grid-cols-2 gap-1'>
+      <div className='grid grid-cols-2 gap-1 mt-1'>
         {Array.from({ length: 6 }, (_, i) => i + 1).map((id) => (
           <input
             key={id}
-            className='rounded border p-2'
+            className='rounded border p-2 w-min-content'
             data-id={String(id)}
             type='text'
             placeholder={String(id)}

packages/core/src/hooks/useActiveElement/useActiveElement.ts

@@ -9,6 +9,8 @@ import { useEffect, useState } from 'react';
  *
  * @example
  * const activeElement = useActiveElement();
+ *
+ * @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useActiveElement.html}
  */
 export const useActiveElement = <ActiveElement extends HTMLElement>() => {
   const [activeElement, setActiveElement] = useState<ActiveElement | null>(null);

packages/core/src/hooks/useDoubleClick/useDoubleClick.demo.tsx

@@ -3,14 +3,14 @@ import { useDoubleClick } from './useDoubleClick';
 
 const Demo = () => {
     const counter = useCounter();
-    const doubleClick = useDoubleClick<HTMLButtonElement>(() => counter.inc());
+    const doubleClickRef = useDoubleClick<HTMLButtonElement>(() => counter.inc());
 
     return (
         <>
             <p>
-                Double clicked: <code>{counter.value}</code> times
+                Double clicked <code>{counter.value}</code> times
             </p>
-            <button ref={doubleClick.ref} type="button">
+            <button ref={doubleClickRef} type="button">
                 Double click me
             </button>
         </>

packages/core/src/hooks/useDoubleClick/useDoubleClick.ts

@@ -29,10 +29,7 @@ export interface UseDoubleClick {
     callback: (event: DoubleClickEvents) => void,
     options?: UseDoubleClickOptions,
     target?: never
-  ): {
-    ref: StateRef<Target>;
-    clicked: boolean;
-  };
+  ): StateRef<Target>;
 }
 
 const DEFAULT_THRESHOLD_TIME = 300;
@@ -59,6 +56,8 @@ const DEFAULT_THRESHOLD_TIME = 300;
  *
  * @example
  * const ref = useDoubleClick(() => console.log('double clicked'));
+ *
+ * @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useDoubleClick.html}
  */
 export const useDoubleClick = ((...params: any[]): any => {
   const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;

packages/core/src/hooks/useWindowFocus/useWindowFocus.demo.tsx

@@ -5,8 +5,8 @@ const Demo = () => {
 
   return (
     <p>
-      {windowFocused && '💡 Click somewhere outside of the document to unfocus.'}
-      {!windowFocused && 'ℹ Tab is unfocused'}
+      {windowFocused && <>💡 Click somewhere outside of the document to <code>unfocus</code></>}
+      {!windowFocused && <>ℹ Tab is <code>unfocused</code></>}
     </p>
   );
 };

packages/core/src/hooks/useWindowFocus/useWindowFocus.ts

@@ -9,6 +9,8 @@ import { useEffect, useState } from 'react';
  *
  * @example
  * const focused = useWindowFocus();
+ *
+ * @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useWindowFocus.html}
  */
 export const useWindowFocus = () => {
   const [focused, setFocused] = useState(false);