How to use react-countup - 4 common examples

To help you get started, we’ve selected a few react-countup examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github googlefonts / korean / app / components / DescriptionEn.js View on Github external
render() {
    let { currentDescFontSelected, currentDescFont, screenWidth } = this.props;
    let marginRightScale = scaleLinear().domain([960, 1280]).clamp(true).range([20, 150]);
    let selectedOrNot = (areaName) => {
      return areaName == currentDescFontSelected ? "marching-ants" : "";
    }
    let { hovered, countUpPlay, oncePlayed } = this.state;


    if (countUpPlay && !oncePlayed) {

      this.setState({
        oncePlayed: true
      });
      startAnimation(this.bigCountUp);
      startAnimation(this.smCountUp);
    }

    var fontNames;

    try {
      fontNames = this.retrieveFontName(currentDescFont);
    } catch(e){
      fontNames = {
        paragraph: {
          fontFamily: "Roboto",
          lineHeight: "1.45em"
        },
        title: {
          fontFamily: "Roboto",
          lineHeight: "1.35em"
        }
github googlefonts / korean / app / components / DescriptionEn.js View on Github external
render() {
    let { currentDescFontSelected, currentDescFont, screenWidth } = this.props;
    let marginRightScale = scaleLinear().domain([960, 1280]).clamp(true).range([20, 150]);
    let selectedOrNot = (areaName) => {
      return areaName == currentDescFontSelected ? "marching-ants" : "";
    }
    let { hovered, countUpPlay, oncePlayed } = this.state;


    if (countUpPlay && !oncePlayed) {

      this.setState({
        oncePlayed: true
      });
      startAnimation(this.bigCountUp);
      startAnimation(this.smCountUp);
    }

    var fontNames;

    try {
      fontNames = this.retrieveFontName(currentDescFont);
    } catch(e){
      fontNames = {
        paragraph: {
          fontFamily: "Roboto",
          lineHeight: "1.45em"
        },
        title: {
          fontFamily: "Roboto",
          lineHeight: "1.35em"
github glennreyes / react-countup / demo / src / App.js View on Github external
handleStartAnimation = event => {
    startAnimation(this.myCountUp);
    event.preventDefault();
  };
github haimich / billy / src / common / components / stats / PanelComponent.tsx View on Github external
import * as React from 'react';
import * as ReactDOM from 'react-dom'
import t from '../../helpers/i18n'
let CountUp = require('react-countup').default

interface Props {
  title: string
  value: number
  icon: string
  suffix?: string
}

export default class PanelComponent extends React.Component {

  render() {
    return (
      <div>
        <div>
          <i aria-hidden="true"></i>
        </div></div>

react-countup

A React component wrapper around CountUp.js

MIT
Latest version published 6 days ago

Package Health Score

86 / 100
Full package analysis