react-countup

By default, the CountUp animation is triggered whenever any of the following props change:

• duration
• end
• start

If you want the component to restart the transition on every component update, set the redraw prop to true.

The project follows a standard Create React App structure. For the project to build successfully, the following files must exist with these exact names:

• public/index.html: The page template.
• src/index.js: The JavaScript entry point.

Key Rules:

• Processing: Only files inside src are processed by Webpack. You must put all JS and CSS files inside src for them to be recognized.
• Assets: Only files inside public can be used directly from public/index.html.
• Top-level directories: You can create other top-level directories, but they will not be included in the production build.

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

Storybook is a development environment that allows you to browse a component library and view different component states in isolation.

To install and initialize Storybook:

1. Install the Storybook CLI globally:

npm install -g @storybook/cli

2. Run the initialization command in your app's directory:

getstorybook

3. Follow the on-screen instructions.

The project is configured as a Progressive Web App (PWA) by default, which uses service workers for offline-first capabilities. If you want to disable this behavior:

To disable caching before your first production deployment:

Remove the call to registerServiceWorker() from src/index.js.

To disable caching for existing users:

If service workers are already active in your production environment, you must unregister them. In src/index.js, modify the service worker import and call unregister() instead of registerServiceWorker():

import { unregister } from './registerServiceWorker';

// Call unregister() instead of registerServiceWorker()

Note: It may take up to 24 hours for the cache to be invalidated depending on how /service-worker.js is served.

You can consume environment variables in your JavaScript files as if they were declared locally. By default, NODE_ENV is available. For any other custom variables, they must start with the prefix REACT_APP_ to be accessible.

Important: Environment variables are embedded at build time. They are not read at runtime from the server. Changing an environment variable requires a restart of the development server.

Access these variables via process.env in your code.

render() {
  return (
    <div>
      <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
      <form>
        <input type="hidden" defaultValue={process.env.REACT_APP_SECRET_CODE} />
      </form>
    </div>
  );
}

Install the package using yarn to add it to your project.

yarn add react-countup

To see linting warnings directly in your editor (like VS Code, Atom, or Sublime Text), install an ESLint plugin for your editor and add an .eslintrc file to your project root with the following content:

{
  "extends": "react-app"
}

Note: This configuration only affects editor integration. Terminal and browser lint output are managed by Create React App's minimal rule set and cannot be changed via this file.

You can use the onStart and onEnd callback properties to manage accessibility states (like aria-busy) while the counter is animating. This allows you to inform assistive technologies that the content is currently changing.

import React from 'react';
import CountUp, { useCountUp } from 'react-countup';

export default function App() {
  useCountUp({ ref: 'counter', end: 10, duration: 2 });
  const [loading, setLoading] = React.useState(false);

  const onStart = () => {
    setLoading(true);
  };

  const onEnd = () => {
    setLoading(false);
  };

  const containerProps = {
    'aria-busy': loading,
  };

  return (
    <>
      <CountUp
        end={123457}
        duration="3"
        onStart={onStart}
        onEnd={onEnd}
        containerProps={containerProps}
      />
      <div id="counter" aria-busy={loading} />
    </>
  );
}

To include a coverage report in your test run, use the --coverage flag. Note that tests run slower when coverage is enabled.

npm test -- --coverage

To enable debugging in VS Code, ensure you have the latest version of VS Code and the Chrome Debugger Extension installed.

1. Create a .vscode folder in your app's root directory.
2. Add a launch.json file inside that folder with the following configuration:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

3. Start your app with npm start.
4. Press F5 or click the green debug icon to start debugging.

When including a script in your HTML that defines global variables, the linter may flag them as undefined. To use these variables intentionally, access them explicitly via the window object.

const $ = window.$;

To identify code bloat and understand your bundle composition, you can use source-map-explorer.

1. Install the package:

npm install --save source-map-explorer
# or
yarn add source-map-explorer

2. Add an analyze script to your package.json:

"scripts": {
  "analyze": "source-map-explorer build/static/js/main.*",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom"
}

3. Run the analysis by building the production version first:

npm run build
npm run analyze

npm install --save source-map-explorer

# After adding script to package.json:
npm run build
npm run analyze