logo

✨ Vi introduserer react-cool-inview:React-krok for å overvåke at et element går inn eller ut av visningsporten (eller et annet element)

react-cool-inview er en React hook / komponent API som overvåker et element som kommer inn eller ut av viewporten (eller et annet element) på en effektiv og effektiv måte, ved hjelp av Intersection Observer. Den er lett og superfleksibel, som kan dekke alle sakene du trenger, som lat-lasting av bilder og videoer, uendelig rulling av nettapper, utløsende animasjoner, sporing av visninger og mer. Prøv det, du vil ❤️ det!

⚡️ Prøv selv:https://react-cool-inview.netlify.app

Funksjoner

  • 🚀 Overvåker elementer med effektiv og ikke-hovedtrådblokkeringsmåte, ved hjelp av Intersection Observer.
  • 🎣 Enkel å bruke, basert på React krok/komponent.
  • 🎛 Super fleksibel API-design som kan dekke alle deksler du trenger.
  • 🖱️ Støtter rulleretning, kult ikke sant?
  • ✌🏻 Støtter Intersection Observer v2.(https://github.com/wellyshen/react-cool-inview#use-your-own-ref).
  • 📜 Støtter TypeScript-typedefinisjon.
  • 🗄️ Gjengivelseskompatibilitet på tjenersiden.
  • 🦔 Liten størrelse (~ 1,2 kB med glidelås). Ingen eksterne avhengigheter, bortsett fra 00 .

Bruk

17 har en fleksibel API-design, den kan dekke enkle til komplekse brukstilfeller for deg. Her er noen ideer til hvordan du kan bruke den.

Grunnleggende bruk

For å overvåke et element går du inn eller ut av visningsporten med 22 statlige og nyttige sukkerarrangementer. 

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>;
};

Bruk som en komponent

Endringer 36 når den kommer inn i visningsporten. Alternativene kan sendes gjennom rekvisittene. 

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>
);

Lazy lasting bilder

Det er superenkelt å bygge en komponent for lazy-loading med 49 for å øke ytelsen til nettappen din. 

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>
  );
};

Uendelig rull

Infinite scroll er en populær designteknikk som Facebook- og Twitter-feed osv., nytt innhold lastes inn mens du ruller nedover en side. Grunnkonseptet som nedenfor. 

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>
  );
};

Utløs animasjoner

Et annet godt bruksområde er å utløse CSS-animasjoner når de er synlige for brukerne. 

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>
  );
};

Spor visninger

52 kan også spille som en visningssporing, hjelper deg å utløse en analytisk hendelse når en bruker ser et element eller en annonse. 

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>;
};

Rulleretning

68 ikke bare overvåker et element som kommer inn i eller forlater visningsporten, men forteller deg også rulleretningen med 71 gjenstand. Objektet inneholder egenskaper for vertikale (y-akser) og horisontale (x-akser), de beregnes hver gang målelementet møter en 89 . Hvis det ikke er nok betingelse for å beregne, vil verdien av egenskapene være 99 . I tillegg vil verdien av egenskapene synkroniseres med rulleretningen til visningsporten. 

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 kan perfekt fortelle deg når et element rulles inn i visningsporten, men den forteller deg ikke om elementet er dekket av noe annet på siden eller om elementet har noen visuelle effekter brukt på det (som 104 , 112 , 122 etc.) som kan gjøre den usynlig. Den største bekymringen som har dukket opp er hvordan denne typen kunnskap kan være nyttig for å forhindre clickjacking og UI-angrep (les denne artikkelen for å lære mer).

Hvis du ønsker å spore klikkfrekvensen (CTR) eller visningen av et element, som faktisk er synlig for en bruker, kan Intersection Observer v2 være redningen. Som introduserer et nytt boolsk felt kalt isVisible. En 130 verdi garanterer at et element er synlig på siden og ikke har noen visuelle effekter brukt på det. En 144 verdien er det motsatte. Karakteristikken til 153 er integrert med 168 tilstand og relaterte hendelser (som onEnter, onLeave osv.) for å gi deg en bedre DX.

Når du bruker v2, er det noe vi trenger å vite:

  • Sjekk nettleserkompatibiliteten. Hvis en nettleser ikke støtter v2, vil vi gå tilbake til v1-atferden.
  • Forstå hvordan synlighet beregnes.
  • Synlighet er mye dyrere å beregne enn veikryss, bruk den bare når det er nødvendig.

For å bruke Intersection Observer v2, må vi sette 172 og 187 alternativer. 

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>;
};

Takk for at du leste, for mer informasjon om bruk, sjekk ut prosjektets GitHub-side:https://github.com/wellyshen/react-cool-inview

Du kan også installere denne pakken distribueres via npm. 

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