✨ Představujeme reagovat-cool-inview:Reagovat hák pro sledování prvku, který vstupuje nebo opouští výřez (nebo jiný prvek)

React-cool-inview je rozhraní API pro háky/komponenty React, které výkonným a efektivním způsobem monitoruje vstup prvku do výřezu (nebo jiného prvku) nebo jej opouští pomocí nástroje Intersection Observer. Je lehký a super flexibilní, který dokáže pokrýt všechny případy, které potřebujete, jako je líné načítání obrázků a videí, webová aplikace pro nekonečné posouvání, spouštění animací, sledování zobrazení a další. Zkuste to, budete to ❤️ to!

⚡️ Vyzkoušejte sami:https://react-cool-inview.netlify.app

Funkce

• 🚀 Monitoruje prvky výkonným způsobem, který neblokuje hlavní vlákno, pomocí Intersection Observer.
• 🎣 Snadné použití, založené na háčku / komponentě React.
• 🎛 Super flexibilní design API, který dokáže pokrýt všechny případy, které potřebujete.
• 🖱️ Podporuje směr posouvání, skvělé, že?
• ✌🏻 Podporuje Intersection Observer v2. (https://github.com/wellyshen/react-cool-inview#use-your-own-ref).
• 📜 Podporuje definici typu TypeScript.
• 🗄️ Kompatibilita vykreslování na straně serveru.
• 🦔 Malá velikost (~ 1,2 kB gzip). Žádné externí závislosti, kromě react .

Použití

react-cool-inview má flexibilní design API, může pro vás pokrýt jednoduché až složité případy použití. Zde je několik nápadů, jak jej můžete použít.

Základní případ použití

Chcete-li sledovat prvek, vstupuje nebo opouští výřez pomocí inView státní a užitečné cukrové události.

import { useInView } from "react-cool-inview";

const App = () => {
  const { observe, unobserve, inView, scrollDirection, entry } = useInView({
    threshold: 0.25, // Default is 0
    onChange: ({ inView, scrollDirection, entry, observe, unobserve }) => {
      // Triggered whenever the target meets a threshold, e.g. [0.25, 0.5, ...]

      unobserve(); // To stop observing the current target element
      observe(); // To re-start observing the current target element
    },
    onEnter: ({ scrollDirection, entry, observe, unobserve }) => {
      // Triggered when the target enters the viewport
    },
    onLeave: ({ scrollDirection, entry, observe, unobserve }) => {
      // Triggered when the target leaves the viewport
    },
    // More useful options...
  });

  return <div ref={observe}>{inView ? "Hello, I am 🤗" : "Bye, I am 😴"}</div>;
};

Použití jako komponent

Změny HelloText když vstoupí do výřezu. Možnosti lze předat přes rekvizity.

import { InView } from "react-cool-inview";

const HelloText = ({ inView, observe }) => (
  <div ref={observe}>{inView ? "Hello, I am 🤗" : "Bye, I am 😴"}</div>
);

const App = () => (
  <InView unobserveOnEnter>
    <HelloText />
  </InView>
);

Líné načítání obrázků

Je velmi snadné vytvořit komponentu pro pomalé načítání obrázků pomocí react-cool-inview ke zvýšení výkonu vaší webové aplikace.

import { useInView } from "react-cool-inview";

const LazyImage = ({ width, height, ...rest }) => {
  const { observe, inView } = useInView({
    // Stop observe when the target enters the viewport, so the "inView" only triggered once
    unobserveOnEnter: true,
    // For better UX, we can grow the root margin so the image will be loaded before it comes to the viewport
    rootMargin: "50px",
  });

  return (
    <div className="placeholder" style={{ width, height }} ref={observe}>
      {inView && <img {...rest} />}
    </div>
  );
};

Nekonečné posouvání

Nekonečné posouvání je oblíbená designová technika, jako je Facebook a Twitter feed atd., přičemž nový obsah se načítá při posouvání stránky dolů. Základní koncept, jak je uvedeno níže.

import { useState } from "react";
import { useInView } from "react-cool-inview";
import axios from "axios";

const App = () => {
  const [todos, setTodos] = useState(["todo-1", "todo-2", "..."]);
  const { observe } = useInView({
    // For better UX, we can grow the root margin so the data will be loaded earlier
    rootMargin: "50px 0px",
    // When the last item comes to the viewport
    onEnter: ({ unobserve, observe }) => {
      // Pause observe when loading data
      unobserve();
      // Load more data
      axios.get("/todos").then((res) => {
        setTodos([...todos, ...res.todos]);
        // Resume observe after loading data
        observe();
      });
    },
  });

  return (
    <div>
      {todos.map((todo, idx) => (
        <div ref={idx === todos.length - 1 ? observe : null}>{todo}</div>
      ))}
    </div>
  );
};

Spustit animace

Dalším skvělým případem použití je spouštění animací CSS, jakmile jsou viditelné pro uživatele.

import { useInView } from "react-cool-inview";

const App = () => {
  const { observe, inView } = useInView({
    // Stop observe when the target enters the viewport, so the "inView" only triggered once
    unobserveOnEnter: true,
    // Shrink the root margin, so the animation will be triggered once the target reach a fixed amount of visible
    rootMargin: "-100px 0px",
  });

  return (
    <div className="container" ref={observe}>
      <div className={inView ? "fade-in" : ""}>I'm a 🍟</div>
    </div>
  );
};

Sledování zobrazení

react-cool-inview může také hrát jako sledovač zobrazení, pomůže vám spustit analytickou událost, když uživatel uvidí prvek nebo reklamu.

import { useInView } from "react-cool-inview";

const App = () => {
  const { observe } = useInView({
    // For an element to be considered "seen", we'll say it must be 100% in the viewport
    threshold: 1,
    onEnter: ({ unobserve }) => {
      // Stop observe when the target enters the viewport, so the callback only triggered once
      unobserve();
      // Fire an analytic event to your tracking service
      someTrackingService.send("🍋 is seen");
    },
  });

  return <div ref={observe}>I'm a 🍋</div>;
};

Směr rolování

react-cool-inview nejen monitoruje prvek, který vstupuje do výřezu nebo jej opouští, ale také vám sděluje směr posouvání pomocí scrollDirection objekt. Objekt obsahuje vertikální (y-axios) a horizontální (x-axios) vlastnosti, které se počítají vždy, když cílový prvek splňuje threshold . Pokud neexistuje dostatečná podmínka pro výpočet, hodnota vlastností bude undefined . Kromě toho se hodnota vlastností bude synchronizovat se směrem posouvání výřezu.

import { useInView } from "react-cool-inview";

const App = () => {
  const {
    observe,
    inView,
    // vertical will be "up" or "down", horizontal will be "left" or "right"
    scrollDirection: { vertical, horizontal },
  } = useInView({
    // Scroll direction is calculated whenever the target meets a threshold
    // more trigger points the calculation will be more instant and accurate
    threshold: [0.2, 0.4, 0.6, 0.8, 1],
    onChange: ({ scrollDirection }) => {
      // We can also access the scroll direction from the event object
      console.log("Scroll direction: ", scrollDirection.vertical);
    },
  });

  return (
    <div ref={observe}>
      <div>{inView ? "Hello, I am 🤗" : "Bye, I am 😴"}</div>
      <div>{`You're scrolling ${vertical === "up" ? "⬆️" : "⬇️"}`}</div>
    </div>
  );
};

Intersection Observer v2

Intersection Observer v1 vám dokáže dokonale říct, kdy je prvek posouván do výřezu, ale neřekne vám, zda je prvek na stránce překryt něčím jiným nebo zda má na prvek aplikovány nějaké vizuální efekty (jako transform , opacity , filter atd.), které jej mohou učinit neviditelným. Hlavní obava, která se objevila, je, jak by tento druh znalostí mohl být užitečný při prevenci clickjackingu a útoků na nápravu uživatelského rozhraní (další informace si přečtěte v tomto článku).

Pokud chcete sledovat míru prokliku (CTR) nebo zobrazení prvku, který uživatel skutečně vidí, zachráncem může být Intersection Observer v2. Což zavádí nové booleovské pole s názvem isVisible. A true value zaručuje, že prvek je na stránce viditelný a nejsou na něj aplikovány žádné vizuální efekty. A false hodnota je právě opačná. Charakteristika isVisible je integrován s inView stav a související události (jako onEnter, onLeave atd.), které vám zajistí lepší DX.

Při používání verze v2 je tu něco, co potřebujeme vědět:

• Zkontrolujte kompatibilitu prohlížeče. Pokud prohlížeč nepodporuje v2, vrátíme se k chování v1.
• Pochopte, jak se počítá viditelnost.
• Výpočet viditelnosti je mnohem dražší než průsečík, používejte ji pouze v případě potřeby.

Abychom mohli používat Intersection Observer v2, musíme nastavit trackVisibility a delay možnosti.

import { useInView } from "react-cool-inview";

const App = () => {
  // With Intersection Observer v2, the "inView" not only tells you the target
  // is intersecting with the root, but also guarantees it's visible on the page
  const { observe, inView } = useInView({
    // Track the actual visibility of the target
    trackVisibility: true,
    // Set a minimum delay between notifications, it must be set to 100 (ms) or greater
    // For performance perspective, use the largest tolerable value as much as possible
    delay: 100,
    onEnter: () => {
      // Triggered when the target is visible and enters the viewport
    },
    onLeave: () => {
      // Triggered when the target is visible and leaves the viewport
    },
  });

  return <div ref={observe}>{inView ? "Hello, I am 🤗" : "Bye, I am 😴"}</div>;
};

Děkujeme za přečtení, další podrobnosti o použití najdete na stránce projektu GitHub:https://github.com/wellyshen/react-cool-inview

Můžete si také nainstalovat tento balíček distribuovaný prostřednictvím npm.

$ yarn add react-cool-inview
# or
$ npm install --save react-cool-inview