“React Count Up sur Scroll” Réponses codées

Le compte sur le défilement ne réagit qu'une seule fois

import React, { useState } from "react";
import CountUp from "react-countup";
import VisibilitySensor from "react-visibility-sensor";

const Ticker = ({ className, ...rest }) => {
  const [viewPortEntered, setViewPortEntered] = useState(false);

  return (
    <CountUp {...rest} start={viewPortEntered ? null : 0}>
      {({ countUpRef }) => {
        return (
          <VisibilitySensor
            active={!viewPortEntered}
            onChange={isVisible => {
              if (isVisible) {
                setViewPortEntered(true);
              }
            }}
            delayedCall
          >
            <h4 className={className} ref={countUpRef} />
          </VisibilitySensor>
        );
      }}
    </CountUp>
  );
};

export default Ticker;
Jealous Jaguar

React Count Up sur Scroll

<CountUp start={0} end={4.8} duration={2} decimals={1}>
    {({ countUpRef, start }) => (
        <VisibilitySensor onChange={start}>
            <span ref={countUpRef} />
        </VisibilitySensor>
    )}
 </CountUp>
Cloudy Crocodile

Réponses similaires à “React Count Up sur Scroll”

Questions similaires à “React Count Up sur Scroll”

Plus de réponses similaires à “React Count Up sur Scroll” dans JavaScript

Parcourir les réponses de code populaires par langue

Parcourir d'autres langages de code