Breaking News: Grepper is joining You.com. Read the official announcement!

countup on scroll react only once

Jealous Jaguar answered on March 24, 2022 Popularity 7/10 Helpfulness 8/10

answer countup on scroll react only once

related React count up on scroll

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: javascript scroll

Link to this answer
Share Copy Link

Contributed on Mar 24 2022

Jealous Jaguar

0 Answers Avg Quality 2/10

Closely Related Answers

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: scroll count javascript scr

Link to this answer
Share Copy Link

Contributed on Apr 13 2022

Cloudy Crocodile

0 Answers Avg Quality 2/10

countup on scroll react only once

Contents

More Related Answers

countup on scroll react only once

Closely Related Answers

React count up on scroll

Grepper

Documentation

Social

Legal

Contact

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