cf-hooks-lib

⚛️ cf-hooks

Librería profesional de React Hooks reutilizables, diseñados para mejorar la productividad, simplicidad y rendimiento en aplicaciones modernas con React.

🚀 Instalación

npm install cf-hooks-lib

⚠️ Esta librería requiere react como peerDependency. Asegúrate de tener React y React Dom 16+ instalado en tu proyecto.

🧩 Hooks disponibles

useDebounce

Ideal para optimizar búsquedas, inputs o eventos frecuentes.

const debouncedValue = useDebounce(value, delay);

• value: cualquier valor que desees debilitar.
• delay: tiempo de espera (en ms) antes de actualizar el valor.

useToggle

Útil para switches, modales, etc.

const [value, toggle, setOn, setOff] = useToggle(initialValue);

• toggle(): invierte el valor actual.
• setOn(): lo pone en true.
• setOff(): lo pone en false.

useClickOutside

Asigna el ref al elemento que quieres proteger del clic externo.

const ref = useClickOutside(() => {
  // Se ejecuta cuando el usuario hace clic fuera del elemento
});

useIsMounted

Saber si un componente sigue montado. Útil para evitar actualizar estado tras unmount

const isMounted = useIsMounted();

useEffect(() => {
  fetchData().then((data) => {
    if (isMounted.current) {
      setData(data);
    }
  });
}, []);

useEventCallback

Devuelve un callback estable que no se vuelve a crear en cada render (memoria óptima).

const handleClick = useEventCallback(() => {
  console.log("Siempre la misma referencia");
});

useLocalStorage

Guarda y lee datos de localStorage de forma reactiva.

const [theme, setTheme] = useLocalStorage("theme", "light");

useSessionStorage

Igual que useLocalStorage, pero usa sessionStorage

const [step, setStep] = useSessionStorage("wizardStep", 1);

useSyncedState

Estado sincronizado entre pestañas usando localStorage.

const [name, setName] = useSyncedState("sharedName", "");

useMediaQuery

Detecta si el viewport coincide con una media query.

const isLarge = useMediaQuery("(min-width: 1024px)");

useWindowSize

Devuelve { width, height } actualizados al redimensionar la ventana.

const { width, height } = useWindowSize();

useElementSize

Mide dinámicamente el tamaño de un elemento (usa ResizeObserver).

const [ref, size] = useElementSize<HTMLDivElement>();
return <div ref={ref}>Ancho: {size.width}px</div>;

useIntersectionObserver

Detecta si un elemento está visible en el viewport (lazy load, animaciones, etc).

const [ref, isVisible] = useIntersectionObserver();
return <div ref={ref}>{isVisible ? "Visible" : "No visible"}</div>;

useHover

Saber si el mouse está encima de un elemento.

const [ref, hovering] = useHover<HTMLDivElement>();
return <div ref={ref}>{hovering ? "Hovering" : "Not hovering"}</div>;

useTimeout

Ejecuta una función una sola vez tras un tiempo.

useTimeout(() => {
  console.log("Timeout ejecutado");
}, 1000);

useInterval

Ejecuta una función repetidamente cada X milisegundos.

useInterval(() => {
  console.log("Cada segundo");
}, 1000);