React count up on scroll

Cloudy Crocodile answered on March 24, 2022 Popularity 8/10 Helpfulness 4/10

answer React count up on scroll

related countup on scroll react only once

React count up on scroll

Comment

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

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: count javascript scroll

Link to this answer
Share Copy Link

Contributed on Apr 13 2022

Cloudy Crocodile

0 Answers Avg Quality 2/10

Closely Related Answers

countup on scroll react only once

Comment

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;

Popularity 7/10 Helpfulness 8/10 Language javascript

Source: stackoverflow.com

Tags: scroll javascript javascrip

Link to this answer
Share Copy Link

Contributed on Mar 24 2022

Jealous Jaguar

0 Answers Avg Quality 2/10

React count up on scroll

Contents

More Related Answers

React count up on scroll

Closely Related Answers

countup on scroll react only once

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.