From fcbd44ff03cecfd7621405dabfbed6e88f0fd646 Mon Sep 17 00:00:00 2001 From: Vladislav Date: Fri, 16 Dec 2022 19:05:41 +0300 Subject: [PATCH] Allow to pass props to wrapper div --- README.MD | 75 ++++++++++++++++++++++++++++++++++++--------------- package.json | 2 +- src/index.tsx | 18 ++++++------- 3 files changed, 64 insertions(+), 31 deletions(-) diff --git a/README.MD b/README.MD index 3e51f78..a676833 100644 --- 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 ``: + +```html + +``` + +> 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 ; -``` -> 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 ; +} +``` ## 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 ; +``` + +## 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 ; + +const App = () => { + return ; +} ``` -## 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')) -... - - +const App = () => { + return ; +} ``` ## Issues diff --git a/package.json b/package.json index d41b3cf..cad6b93 100644 --- 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 index 037578d..0d0cd5f 100644 --- 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 { /** - * 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,7 +32,7 @@ export interface ReactOdometerProps { value: number; } -const ReactOdometer: FC = ({ value, ...options }) => { +const ReactOdometer: FC = ({ animation, duration, format, theme, value, ...rest }) => { const node = useRef(null); const odometer = useRef(); @@ -44,8 +40,11 @@ const ReactOdometer: FC = ({ value, ...options }) => { odometer.current = new Odometer({ el: node.current, auto: false, + animation, + duration, + format, + theme, value, - ...options, }); }, []); @@ -54,6 +53,7 @@ const ReactOdometer: FC = ({ value, ...options }) => { }, [value]); return createElement('div', { + ...rest, ref: node, }); };