Hola, soy Haroon, un desarrollador senior Full Stack. Hoy, compartiré algunas funciones de JavaScript increíblemente útiles que puedes usar en casi todos los proyectos

1. Realiza un seguimiento de la visibilidad de un elemento dentro de la ventana gráfica.

Esta utilidad utiliza la API de Intersection Observer para rastrear la visibilidad de un elemento dentro de la ventana gráfica. Llama a una función de devolución de llamada con un valor booleano que indica si el elemento es visible o no.

function onVisibilityChange(element, callback) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => callback(entry.isIntersecting));
  });
  observer.observe(element);
}

// Example usage:
const targetElement = document.querySelector('#target');
onVisibilityChange(targetElement, (isVisible) => {
  console.log(`Element is ${isVisible ? 'visible' : 'not visible'}`);
});

2. Puntos de interrupción de la ventana gráfica reactiva

Esta utilidad le permite definir puntos de interrupción y recibir notificaciones cuando el ancho de la ventana gráfica cruza estos puntos de interrupción. Llama a una función de devolución de llamada con el valor del punto de interrupción actual.

function onBreakpointChange(breakpoints, callback) {
  const mediaQueries = breakpoints.map(bp => window.matchMedia(`(max-width: ${bp}px)`));

  function checkBreakpoints() {
    const breakpoint = breakpoints.find((bp, i) => mediaQueries[i].matches);
    callback(breakpoint || 'default');
  }

  mediaQueries.forEach(mq => mq.addListener(checkBreakpoints));
  checkBreakpoints();
}

// Example usage:
onBreakpointChange([600, 900, 1200], (breakpoint) => {
  console.log(`Current breakpoint: ${breakpoint}`);
});

3. API reactiva del portapapeles

Esta utilidad escucha eventos de copia y lee el texto copiado del portapapeles, llamando a una función de devolución de llamada con el texto copiado.

function onClipboardChange(callback) {
  document.addEventListener('copy', async () => {
    const text = await navigator.clipboard.readText();
    callback(text);
  });
}

// Example usage:
onClipboardChange((text) => {
  console.log(`Copied text: ${text}`);
});

4. API de orientación de pantalla reactiva

Esta utilidad escucha los cambios en la orientación de la pantalla y llama a una función de devolución de llamada con el tipo de orientación actual.

function onOrientationChange(callback) {
  window.addEventListener('orientationchange', () => {
    callback(screen.orientation.type);
  });
}

// Example usage:
onOrientationChange((orientation) => {
  console.log(`Current orientation: ${orientation}`);
});

5. Estado reactivo para mostrar si el mouse abandona la página.

Esta utilidad rastrea cuándo el mouse sale o ingresa a la página y llama a una función de devolución de llamada con un valor booleano que indica si el mouse abandonó la página.

function onMouseLeavePage(callback) {
  document.addEventListener('mouseleave', () => {
    callback(true);
  });

  document.addEventListener('mouseenter', () => {
    callback(false);
  });
}

// Example usage:
onMouseLeavePage((hasLeft) => {
  console.log(`Mouse has ${hasLeft ? 'left' : 'entered'} the page`);
});

Cada una de estas utilidades aprovecha los detectores de eventos y las API modernas para proporcionar un comportamiento reactivo en sus aplicaciones JavaScript.

Gracias por tomarse el tiempo de explorar conmigo estas potentes utilidades de JavaScript. Espero que los encuentres tan útiles y emocionantes como yo. Siéntase libre de experimentar con estas funciones en sus proyectos y ver cómo pueden mejorar su proceso de desarrollo. Si tiene alguna pregunta o desea compartir sus propios consejos, escríbala en los comentarios. ¡Feliz codificación!