Olá, sou Haroon, desenvolvedor Full Stack sênior. Hoje, vou compartilhar algumas funções JavaScript incrivelmente úteis que você pode usar em quase todos os projetos

1. Rastreia a visibilidade de um elemento na viewport

Este utilitário usa a API Intersection Observer para rastrear a visibilidade de um elemento na janela de visualização. Ele chama uma função de retorno de chamada com um valor booleano indicando se o elemento está visível ou não.

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. Pontos de interrupção reativos da viewport

Este utilitário permite definir pontos de interrupção e ser notificado quando a largura da janela de visualização cruzar esses pontos de interrupção. Ele chama uma função de retorno de chamada com o valor do ponto de interrupção atual.

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 reativa da área de transferência

Este utilitário escuta eventos de cópia e lê o texto copiado da área de transferência, chamando uma função de retorno de chamada com o 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 orientação de tela reativa

Este utilitário detecta alterações na orientação da tela e chama uma função de retorno de chamada com o tipo de orientação atual.

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

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

5. Estado reativo para mostrar se o mouse sai da página

Este utilitário rastreia quando o mouse sai ou entra na página e chama uma função de retorno de chamada com um valor booleano indicando se o mouse saiu da 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 um desses utilitários aproveita ouvintes de eventos e APIs modernas para fornecer comportamento reativo em seus aplicativos JavaScript.

Obrigado por reservar um tempo para explorar esses poderosos utilitários JavaScript comigo. Espero que você os considere tão úteis e interessantes quanto eu. Sinta-se à vontade para experimentar essas funções em seus projetos e ver como elas podem aprimorar seu processo de desenvolvimento. Se você tiver alguma dúvida ou quiser compartilhar suas próprias dicas, escreva nos comentários. Boa codificação!