react-native-animated-stopwatch-timer - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

lib/commonjs/StopwatchTimer.js

@@ -24,2 +24,3 @@ "use strict";
     enterAnimationType = 'slide-in-up',
+    mode = 'stopwatch',
     digitStyle,
@@ -42,3 +43,7 @@ initialTimeInMs,
     getSnapshot
-  } = (0, _useTimer.default)(initialTimeInMs, onFinish);
+  } = (0, _useTimer.default)({
+    initialTimeInMs,
+    onFinish,
+    mode
+  });
   (0, _react.useImperativeHandle)(ref, () => ({
@@ -45,0 +50,0 @@ play,

lib/commonjs/useTimer.js

@@ -13,5 +13,9 @@ "use strict";
  */
-const useTimer = function () {
-  let initialTimeInMs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  let onFinish = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => null;
+const useTimer = _ref => {
+  let {
+    initialTimeInMs = 0,
+    onFinish = () => null,
+    mode = 'stopwatch'
+  } = _ref;
+  const direction = mode === 'timer' ? -1 : 1;
   const [elapsedInMs, setElapsedInMs] = (0, _react.useState)(0);
@@ -33,3 +37,3 @@ const startTime = (0, _react.useRef)(null);
     // Checking if it's a timer and it reached 0
-    if (initialTimeInMs > 0 && elapsedInMs >= initialTimeInMs) {
+    if (mode === 'timer' && elapsedInMs >= initialTimeInMs) {
       removeInterval();
@@ -39,5 +43,5 @@ setElapsedInMs(initialTimeInMs);
     }
-  }, [elapsedInMs, initialTimeInMs, throttledOnFinish]);
+  }, [elapsedInMs, initialTimeInMs, mode, throttledOnFinish]);
   function getSnapshot() {
-    return Math.abs(initialTimeInMs - elapsedInMs);
+    return Math.abs(initialTimeInMs + elapsedInMs * direction);
   }
@@ -50,3 +54,3 @@ function play() {
     // Timer mode and it reached 0, returning early
-    if (elapsedInMs === initialTimeInMs && initialTimeInMs > 0) {
+    if (elapsedInMs === initialTimeInMs && mode === 'timer') {
       return;
@@ -53,0 +57,0 @@ }

lib/module/StopwatchTimer.js

@@ -15,2 +15,3 @@ import React, { forwardRef, useImperativeHandle } from 'react';
     enterAnimationType = 'slide-in-up',
+    mode = 'stopwatch',
     digitStyle,
@@ -33,3 +34,7 @@ initialTimeInMs,
     getSnapshot
-  } = useTimer(initialTimeInMs, onFinish);
+  } = useTimer({
+    initialTimeInMs,
+    onFinish,
+    mode
+  });
   useImperativeHandle(ref, () => ({
@@ -36,0 +41,0 @@ play,

lib/module/useTimer.js

@@ -7,5 +7,9 @@ import { useEffect, useMemo, useRef, useState } from 'react';
  */
-const useTimer = function () {
-  let initialTimeInMs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  let onFinish = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => null;
+const useTimer = _ref => {
+  let {
+    initialTimeInMs = 0,
+    onFinish = () => null,
+    mode = 'stopwatch'
+  } = _ref;
+  const direction = mode === 'timer' ? -1 : 1;
   const [elapsedInMs, setElapsedInMs] = useState(0);
@@ -27,3 +31,3 @@ const startTime = useRef(null);
     // Checking if it's a timer and it reached 0
-    if (initialTimeInMs > 0 && elapsedInMs >= initialTimeInMs) {
+    if (mode === 'timer' && elapsedInMs >= initialTimeInMs) {
       removeInterval();
@@ -33,5 +37,5 @@ setElapsedInMs(initialTimeInMs);
     }
-  }, [elapsedInMs, initialTimeInMs, throttledOnFinish]);
+  }, [elapsedInMs, initialTimeInMs, mode, throttledOnFinish]);
   function getSnapshot() {
-    return Math.abs(initialTimeInMs - elapsedInMs);
+    return Math.abs(initialTimeInMs + elapsedInMs * direction);
   }
@@ -44,3 +48,3 @@ function play() {
     // Timer mode and it reached 0, returning early
-    if (elapsedInMs === initialTimeInMs && initialTimeInMs > 0) {
+    if (elapsedInMs === initialTimeInMs && mode === 'timer') {
       return;
@@ -47,0 +51,0 @@ }

lib/typescript/StopwatchTimer.d.ts

@@ -25,4 +25,8 @@ import React from 'react';
     /**
-     * If you want to use it as a timer, set this value
+     * Whether the component should work as a stopwatch or as a timer.
      */
+    mode?: 'stopwatch' | 'timer';
+    /**
+     * Initial time in milliseconds
+     */
     initialTimeInMs?: number;
@@ -29,0 +33,0 @@ /**

lib/typescript/useTimer.d.ts

 /**
  * A custom hook that handles the state for the timer
  */
-declare const useTimer: (initialTimeInMs?: number, onFinish?: () => void) => {
+declare const useTimer: ({ initialTimeInMs, onFinish, mode, }: {
+    initialTimeInMs?: number | undefined;
+    onFinish?: (() => void) | undefined;
+    mode?: "timer" | "stopwatch" | undefined;
+}) => {
     tensOfMs: number;
@@ -6,0 +10,0 @@ lastDigit: number;

package.json

 {
   "name": "react-native-animated-stopwatch-timer",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "React Native Stopwatch component that smoothly animates the digits change",
@@ -44,3 +44,3 @@ "main": "lib/commonjs/index",
   "repository": "https://github.com/rgommezz/react-native-animated-stopwatch-timer",
-  "author": "rgommezz <[e-mail]> (https://github.com/rgommezz)",
+  "author": "Raul Gomez Acuna <[e-mail]> (https://github.com/rgommezz)",
   "license": "MIT",
@@ -47,0 +47,0 @@ "bugs": {

README.md

@@ -9,3 +9,15 @@ # react-native-animated-stopwatch-timer
  <p><i>A React Native Stopwatch/Timer component that empowers <b>reanimated worklets</b> to smoothly animate the digit change. Cross-platform, performant, with all <b>layout animations executed on the UI thread at 60FPS</b>. Compatible with Expo.</i></p>
+ 
+- [Features](#features)
+- [Preview](#preview)
+- [Try it out](#try-it-out)
+- [Installation](#installation)
+- [Modes](#modes)
+- [Usage](#usage)
+- [Props](#props)
+- [Methods](#methods)
+- [Contributing](#contributing)
+- [License](#license)
 
+
  ## Features
@@ -46,3 +58,3 @@ - **:fire: Performant**: all digit animations are executed on the UI thread
 - **Stopwatch**: The timer starts counting up from 0 (default).
-- **Timer**: The timer starts counting down from a given time. Use the `initialTimeInMs` prop to activate this mode.
+- **Timer**: The timer starts counting down from a given time. Use the `mode` prop and set it to `"timer"`.
 
@@ -81,2 +93,6 @@ ## Usage
 | -------------------- | -------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `mode`               | no       | `stopwatch` or `timer`             | Whether the component should work as a **stopwatch or as a timer**. Defaults to `stopwatch`                                                                                                                                                                                                                                            |
+| `initialTimeInMs`    | no       | `number`                           | Initial time in miliseconds                                                                                                                                                                                                                                                                                                            |
+| `onFinish`           | no       | `() => void`                       | Callback executed when the timer reaches 0 (only when working in **timer mode** and `initialTimeInMs` prop is provided)                                                                                                                                                                                                                |
+| `trailingZeros`      | no       | `0`, `1` or `2`                    | If `0`, the component will only display seconds and minutes. If `1`, the component will display seconds, minutes, and a hundredth of ms. If `2`, the component will display seconds, minutes, and tens of ms. Defaults to `1`                                                                                                          |
 | `animationDuration`  | no       | `number`                           | The enter/exit animation duration in milliseconds of a digit. Defaults to `80`                                                                                                                                                                                                                                                         |
@@ -86,10 +102,7 @@ | `animationDelay`     | no       | `number`                           | The enter/exit animation delay in milliseconds of a digit. Defaults to `0`                                                                                                                                                                                                                                                             |
 | `containerStyle`     | no       | `StyleProp<ViewStyle>`             | The style of the stopwatch/timer `View` container                                                                                                                                                                                                                                                                                      |
-| `digitStyle`         | no       | `StyleProp<TextStyle>`             | Extra style applied to each digit, excluding separators (`:` and `,`). This property is useful if the `fontFamily` has different widths per digit to avoid an unpleasant fluctuation of the total component width as it runs. Check the example app where this is used on iOS's default San Francisco font, which presents this issue. |
-| `initialTimeInMs`    | no       | `number`                           | If you want to **use it as a timer**, set this value                                                                                                                                                                                                                                                                                   |
+| `digitStyle`         | no       | `StyleProp<TextStyle>`             | Extra style applied to each digit, excluding separators (`:` and `,`). This property is useful if the `fontFamily` has different widths per digit to avoid an unpleasant fluctuation of the total component width as it runs. Check the example app where this is used on iOS's default San Francisco font, which presents this issue.|
 | `leadingZeros`       | no       | `1` or `2`                         | The number of zeros for the minutes. Defaults to 1                                                                                                                                                                                                                                                                                     |
 | `enterAnimationType` | no       | `'slide-in-up' or 'slide-in-down'` | Whether the new digit should enter from the top or the bottom                                                                                                                                                                                                                                                                          |
 | `separatorStyle`     | no       | `StyleProp<TextStyle>`             | Extra style applied only to separators. In this case, the colon (`:`) and the comma (`,`)                                                                                                                                                                                                                                              |
-| `onFinish`           | no       | `() => void`                       | Callback executed when the timer reaches 0 (only when working in **timer mode** and `initialTimeInMs` prop is provided)                                                                                                                                                                                                                |
 | `textCharStyle`      | no       | `StyleProp<TextStyle>`             | The style applied to each individual character of the stopwatch/timer                                                                                                                                                                                                                                                                  |
-| `trailingZeros`      | no       | `0`, `1` or `2`                    | If `0`, the component will only display seconds and minutes. If `1`, the component will display seconds, minutes, and a hundredth of ms. If `2`, the component will display seconds, minutes, and tens of ms. Defaults to `1`                                                                                                          |
 
@@ -138,6 +151,4 @@ ## Methods
 
-MIT
+MIT © [Raul Gomez Acuna](https://raulgomez.io/)
 
----
-
-Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
+If you found this project interesting, please consider following me on [twitter](https://twitter.com/rgommezz)

src/useTimer.ts

@@ -7,6 +7,12 @@ import { useEffect, useMemo, useRef, useState } from 'react';
  */
-const useTimer = (
-  initialTimeInMs: number = 0,
-  onFinish: () => void = () => null
-) => {
+const useTimer = ({
+  initialTimeInMs = 0,
+  onFinish = () => null,
+  mode = 'stopwatch',
+}: {
+  initialTimeInMs?: number;
+  onFinish?: () => void;
+  mode?: 'timer' | 'stopwatch';
+}) => {
+  const direction = mode === 'timer' ? -1 : 1;
   const [elapsedInMs, setElapsedInMs] = useState(0);
@@ -30,3 +36,3 @@ const startTime = useRef<number | null>(null);
     // Checking if it's a timer and it reached 0
-    if (initialTimeInMs > 0 && elapsedInMs >= initialTimeInMs) {
+    if (mode === 'timer' && elapsedInMs >= initialTimeInMs) {
       removeInterval();
@@ -36,6 +42,6 @@ setElapsedInMs(initialTimeInMs);
     }
-  }, [elapsedInMs, initialTimeInMs, throttledOnFinish]);
+  }, [elapsedInMs, initialTimeInMs, mode, throttledOnFinish]);
 
   function getSnapshot() {
-    return Math.abs(initialTimeInMs - elapsedInMs);
+    return Math.abs(initialTimeInMs + elapsedInMs * direction);
   }
@@ -49,3 +55,3 @@
     // Timer mode and it reached 0, returning early
-    if (elapsedInMs === initialTimeInMs && initialTimeInMs > 0) {
+    if (elapsedInMs === initialTimeInMs && mode === 'timer') {
       return;
@@ -52,0 +58,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

63909

increased by2.61%

Lines of code

965

increased by4.44%

Number of lines in readme file

150

increased by7.91%

No dependency changes