Allow to pass props to wrapper div

bezenson · Dec 16, 2022 · fcbd44f · fcbd44f
1 parent 14ba103
commit fcbd44f
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 31 deletions.
diff --git a/README.MD b/README.MD
@@ -1,10 +1,19 @@
+![Latest version](https://img.shields.io/npm/v/react-odometerjs)
+![Downloads](https://img.shields.io/npm/dm/react-odometerjs)
+
 # React Odometer.js
 
 Simple React wrapper around [Odometer.js](https://github.com/HubSpot/odometer).
 
-## How to use it
+  - [How to use this library](#how-to-use-this-library)
+  - [Options](#options)
+  - [Next.js integration](#nextjs-integration)
+  - [Gatsby integration](#gatsby-integration)
+  - [Issues](#issues)
+
+## How to use this library
 
-1. Installation
+1. Install npm package:
 
 ```bash
 npm install --save react-odometerjs
@@ -16,28 +25,49 @@ or
 yarn add react-odometerjs
 ```
 
-2. Include component in your application:
+2. Import CSS file in your app `<head>`:
+
+```html
+<link rel="stylesheet" href="odometer-theme-default.css" />
+```
+
+> Official themes can be found [here](http://github.hubspot.com/odometer/api/themes/).
+
+3. Include component in your application:
 
 ```javascript
 import Odometer from 'react-odometerjs';
-// ...
-return <Odometer value={1234} format="(.ddd),dd" />;
-```
 
-> Don't forget to include styles on your page. Official themes can be found
-> [here](http://github.hubspot.com/odometer/api/themes/).
+const App = () => {
+    return <Odometer value={1234} format="(.ddd),dd" />;
+}
+```
 
 ## Options
 
-You can pass odometer __options via props__. See
-[official documentation](http://github.hubspot.com/odometer/) of Odometer.js to learn about
-available options.
+| Option      | Type                   | Default       | Description                                                                                                                                 |
+| ----------- | ---------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| `animation` | `'count' \| undefined` |               | Count is a simpler animation method which just increments the value, use it when you're looking for something more subtle.                  |
+| `duration`  | `number`               | `2000`        | Change how long the javascript expects the CSS animation to take.                                                                           |
+| `format`    | `string`               | `'(,ddd).dd'` | Change how digit groups are formatted, and how many digits are shown after the decimal point.                                               |
+| `theme`     | `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`. |
+| `value`     | `number`               |               | Current value. Change it to run animation.                                                                                                  |
+
+You can read about options on [official website](http://github.hubspot.com/odometer/).
 
-## [Next.js](https://github.com/zeit/next.js/) integration
+Also component can receive any `div` property.
+
+Example:
+
+```javascript
+// Pass `style` prop
+return <Odometer value={1234} style={{ cursor: 'pointer' }} />;
+```
+
+## Next.js integration
 
 Because Odometer.js requires `document` object, we should load library using
-[dynamic import](https://github.com/zeit/next.js/#dynamic-import), to avoid loading library on
-server-side.
+[dynamic import](https://github.com/zeit/next.js/#dynamic-import), to avoid loading library on server-side.
 
 Example snippet:
 
@@ -48,16 +78,19 @@ const Odometer = dynamic(import('react-odometerjs'), {
     ssr: false,
     loading: () => 0
 });
-// ...
-return <Odometer value={1234} format="(.ddd),dd" />;
+
+const App = () => {
+    return <Odometer value={1234} />;
+}
 ```
 
-## Gatsby
+## Gatsby integration
 
 `Odometer.js`
 ```js
 import Odometer from 'react-odometerjs'
-export default Odometer
+
+export default Odometer;
 ```
 
 `App.js`
@@ -66,9 +99,9 @@ import loadable from '@loadable/component'
 
 const Odometer = loadable(() => import('./Odometer'))
 
-...
-
-<Odometer value={1234} />
+const App = () => {
+    return <Odometer value={1234} />;
+}
 ```
 
 ## Issues

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-odometerjs",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Odometer.js as a React component",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,9 +1,9 @@
-import { createElement, useEffect, useRef, type FC } from 'react';
+import { createElement, type HTMLProps, useEffect, useRef, type FC } from 'react';
 import Odometer from 'odometer';
 
-export interface ReactOdometerProps {
+export interface ReactOdometerProps extends HTMLProps<HTMLDivElement> {
   /**
-   * Count is a simpler animation method which just increments the value,  use it when you're looking for something more
+   * Count is a simpler animation method which just increments the value, use it when you're looking for something more
    * subtle.
    */
   animation?: 'count';
@@ -21,10 +21,6 @@ export interface ReactOdometerProps {
    * 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`.
@@ -36,16 +32,19 @@ export interface ReactOdometerProps {
   value: number;
 }
 
-const ReactOdometer: FC<ReactOdometerProps> = ({ value, ...options }) => {
+const ReactOdometer: FC<ReactOdometerProps> = ({ animation, duration, format, theme, value, ...rest }) => {
   const node = useRef<HTMLDivElement>(null);
   const odometer = useRef<Odometer>();
 
   useEffect(() => {
     odometer.current = new Odometer({
       el: node.current,
       auto: false,
+      animation,
+      duration,
+      format,
+      theme,
       value,
-      ...options,
     });
   }, []);
 
@@ -54,6 +53,7 @@ const ReactOdometer: FC<ReactOdometerProps> = ({ value, ...options }) => {
   }, [value]);
 
   return createElement('div', {
+    ...rest,
     ref: node,
   });
 };