Rewrite on hooks. Add TypeScript declarations 🎉

.eslintrc.js

@@ -1,13 +1,32 @@
 module.exports = {
-  parser: 'babel-eslint',
-  extends: 'airbnb',
-  plugins: ['react'],
   env: {
     browser: true,
+    es2021: true,
+  },
+  extends: ['plugin:react/recommended', 'standard-with-typescript'],
+  overrides: [],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    project: ['./tsconfig.json'],
+    sourceType: 'module',
   },
+  plugins: ['react'],
   rules: {
-    'import/no-extraneous-dependencies': 0,
-    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
-    'react/require-default-props': 0,
+    'comma-dangle': 0,
+    'no-irregular-whitespace': ['error', { skipComments: true }],
+    semi: 0,
+    '@typescript-eslint/comma-dangle': ['error', 'always-multiline'],
+    '@typescript-eslint/member-delimiter-style': ['error', {
+      multiline: {
+        delimiter: 'semi',
+        requireLast: true,
+      },
+      singleline: {
+        delimiter: 'semi',
+        requireLast: true,
+      },
+      multilineDetection: 'brackets',
+    }],
+    '@typescript-eslint/semi': ['error', 'always'],
   },
 };

.gitignore

@@ -1,3 +1,5 @@
 node_modules/
 npm-debug.log
 dist
+.yarn/
+.DS_Store

.yarnrc.yml

@@ -0,0 +1,7 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-outdated.cjs
+    spec: "https://mskelton.dev/yarn-outdated/v3"
+
+yarnPath: .yarn/releases/yarn-3.3.0.cjs

LICENSE.MD

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 Vladislav Bezenson
+Copyright (c) 2022 Vladislav Bezenson
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

odometer.d.ts

@@ -0,0 +1,8 @@
+declare module 'odometer' {
+  import { type ReactOdometerProps } from './src';
+  class Odometer {
+    constructor (options: ReactOdometerProps);
+    public update (value: number): number;
+  }
+  export default Odometer;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-odometerjs",
-  "version": "2.1.2",
+  "version": "3.0.0",
   "description": "Odometer.js as a React component",
   "main": "./dist/index.js",
   "repository": {
@@ -26,25 +26,24 @@
     "odometer": "^0.4.8"
   },
   "peerDependencies": {
-    "react": ">= 16.3.0",
-    "react-dom": ">= 16.3.0"
+    "react": ">= 16.8.0",
+    "react-dom": ">= 16.8.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.23.0",
-    "babel-eslint": "^9.0.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.15",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-stage-0": "^6.22.0",
-    "eslint": "^5.5.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-react": "^7.11.1",
-    "prop-types": "^15.6.2"
+    "@types/react": "^18.0.26",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.46.1",
+    "eslint": "^8.0.1",
+    "eslint-config-standard-with-typescript": "latest",
+    "eslint-plugin-n": "^15.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "latest",
+    "typescript": "*"
   },
   "scripts": {
-    "build": "babel src --out-dir dist",
+    "build": "tsc",
     "lint-js": "eslint --ignore-path .gitignore --ignore-pattern \"!**/.*\" .",
     "prepublish": "npm run build"
-  }
+  },
+  "packageManager": "yarn@3.3.0"
 }

src/index.tsx

@@ -0,0 +1,59 @@
+import { createElement, useEffect, useRef, type FC } from 'react';
+import Odometer from 'odometer';
+
+export interface ReactOdometerProps {
+  /**
+   * Count is a simpler animation method which just increments the value,  use it when you're looking for something more
+   * subtle.
+   */
+  animation?: 'count';
+  /**
+   * Change how long the javascript expects the CSS animation to take.
+   * @default 2000
+   */
+  duration?: number;
+  /**
+   * Change how digit groups are formatted, and how many digits are shown after the decimal point.
+   * (,ddd)    -  12,345,678
+   * (,ddd).dd -  12,345,678.09
+   * (.ddd),dd -  12.345.678,09
+   * ( ddd),dd -  12 345 678,09
+   * d         -  12345678
+   */
+  format?: string;
+  /**
+   * Change the selector used to automatically find things to be animated
+   */
+  selector?: string;
+  /**
+   * Specify the theme (if you have more than one theme css file on the page).
+   * Will add CSS class .odometer-theme-{prop value} to wrapper `div`.
+   */
+  theme?: string;
+  /**
+   * Current value. Change it to run animation.
+   */
+  value: number;
+}
+
+const ReactOdometer: FC<ReactOdometerProps> = ({ value, ...options }) => {
+  const node = useRef();
+  const odometer = useRef(
+    new Odometer({
+      el: node.current,
+      auto: false,
+      value,
+      ...options,
+    }),
+  );
+
+  useEffect(() => {
+    odometer.current.update(value);
+  }, [value]);
+
+  return createElement('div', {
+    ref: node,
+  });
+};
+
+export default ReactOdometer;

tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "commonjs",
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["src", "odometer.d.ts"],
+  "exclude": ["node_modules"],
+}