@number-flow/react - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/framer-motion.d.ts

@@ -1,5 +0,7 @@
-import { Transition } from 'framer-motion';
+import { Easing, Transition } from 'framer-motion';
 
-declare const defaultXTiming: Transition;
+declare function toEase(_easing: string): Easing;
+declare function toTransition(timing: EffectTiming): Transition;
+declare function useTiming(timing: EffectTiming): Transition;
 
-export { defaultXTiming };
+export { toEase, toTransition, useTiming };

dist/framer-motion.js

 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -18,2 +20,10 @@ var __export = (target, all) => {
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
@@ -24,21 +34,69 @@
 __export(framer_motion_exports, {
-  defaultXTiming: () => defaultXTiming
+  toEase: () => toEase,
+  toTransition: () => toTransition,
+  useTiming: () => useTiming
 });
 module.exports = __toCommonJS(framer_motion_exports);
-var import_number_flow = require("number-flow");
+var React = __toESM(require("react"));
 var import_framer_motion = require("framer-motion");
-var defaultTransformer = (0, import_framer_motion.transform)(
-  import_number_flow.defaultXTimingLinearPoints.map((_, i) => i / (import_number_flow.defaultXTimingLinearPoints.length - 1)),
-  import_number_flow.defaultXTimingLinearPoints
-);
-var defaultXTiming = import_number_flow.supportsLinear ? {
-  duration: import_number_flow.defaultXTimingLinearDuration / 1e3,
-  ease: defaultTransformer
-} : {
-  duration: import_number_flow.defaultXTimingFallbackDuration / 1e3,
-  easing: import_number_flow.defaultXTimingFallbackPoints
-};
+var bezierRegExp = /^cubic-bezier\((.*?),(.*?),(.*?),(.*?)\)$/;
+var linearRegExp = /^linear\((.*?)\)$/;
+function toEase(_easing) {
+  const easing = _easing.trim();
+  if (easing === "linear") return easing;
+  if (easing === "ease-in") return "easeIn";
+  if (easing === "ease-out") return "easeOut";
+  if (easing === "ease-in-out") return "easeInOut";
+  const bezierMatch = easing.match(bezierRegExp);
+  if (bezierMatch) {
+    return bezierMatch.slice(1).map(parseFloat);
+  }
+  const linearMatch = easing.match(linearRegExp);
+  const linearExpr = linearMatch?.[1];
+  if (linearExpr) {
+    const points = linearExpr.split(",");
+    const times = [];
+    const values = [];
+    try {
+      points.forEach((point, i) => {
+        const [p1, p2] = point.trim().split(/\s+/);
+        if (p1?.includes("%")) {
+          times.push(parseFloat(p1) / 100);
+          values.push(parseFloat(p2));
+        } else if (p2?.includes("%")) {
+          times.push(parseFloat(p2) / 100);
+          values.push(parseFloat(p1));
+        } else {
+          times.push(i / (points.length - 1));
+          values.push(parseFloat(p1));
+        }
+      });
+    } catch {
+      throw new Error(`Cannot parse linear() expression: ${easing}`);
+    }
+    return (0, import_framer_motion.transform)(times, values);
+  }
+  throw new Error(`Cannot convert ${easing} to a Framer Motion easing`);
+}
+function toTransition(timing) {
+  const { duration = 0, delay = 0, easing = "ease" } = timing;
+  if (typeof duration != "number") throw new Error("Duration must be a number");
+  return {
+    duration: duration / 1e3,
+    delay: delay / 1e3,
+    ease: toEase(easing)
+  };
+}
+function useTiming(timing) {
+  const [ret, setRet] = React.useState(toTransition(timing));
+  React.useEffect(() => {
+    setRet(toTransition(timing));
+  }, [timing]);
+  return ret;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  defaultXTiming
+  toEase,
+  toTransition,
+  useTiming
 });

dist/index.d.ts

@@ -31,2 +31,10 @@ import * as React from 'react';
 
-export { NumberFlowElement, type NumberFlowProps, NumberFlow as default };
+declare function useSupportsLinear(): boolean;
+type LinearEasing = `linear(${string})`;
+type LinearTiming = EffectTiming & {
+    easing: LinearEasing;
+};
+declare function useLinear(linear: LinearEasing, fallback: string): string;
+declare function useLinear(linear: LinearTiming, fallback: EffectTiming): EffectTiming;
+
+export { NumberFlowElement, type NumberFlowProps, NumberFlow as default, useLinear, useSupportsLinear };

dist/index.js

@@ -37,3 +37,5 @@ "use strict";
   defaultXTiming: () => import_number_flow2.defaultXTiming,
-  defaultYTiming: () => import_number_flow2.defaultYTiming
+  defaultYTiming: () => import_number_flow2.defaultYTiming,
+  useLinear: () => useLinear,
+  useSupportsLinear: () => useSupportsLinear
 });
@@ -126,2 +128,13 @@ module.exports = __toCommonJS(src_exports);
 var src_default = NumberFlow;
+function useSupportsLinear() {
+  const [supported, setSupported] = React.useState(false);
+  React.useEffect(() => {
+    setSupported(import_number_flow.supportsLinear);
+  }, []);
+  return supported;
+}
+function useLinear(linear, fallback) {
+  const supported = useSupportsLinear();
+  return supported ? linear : fallback;
+}
 // Annotate the CommonJS export names for ESM import in node:
@@ -131,3 +144,5 @@ 0 && (module.exports = {
   defaultXTiming,
-  defaultYTiming
+  defaultYTiming,
+  useLinear,
+  useSupportsLinear
 });

package.json

@@ -6,3 +6,3 @@ {
   },
-  "version": "0.1.1",
+  "version": "0.1.2",
   "author": {
@@ -13,5 +13,5 @@ "name": "Maxwell Barvian",
   },
-  "description": "A lightweight component to transition and format numbers.",
+  "description": "A component to transition and format numbers.",
   "license": "MIT",
-  "homepage": "https://number-flow.barvian.me/react",
+  "homepage": "https://number-flow.barvian.me",
   "repository": {
@@ -64,3 +64,3 @@ "type": "git",
     "esm-env": "^1.0.0",
-    "number-flow": "0.2.1"
+    "number-flow": "0.2.2"
   },
@@ -67,0 +67,0 @@ "devDependencies": {

README.md

 # Number Flow for React
 
-A lightweight React component to transition & format numbers.
+A React component to transition & format numbers.
 
@@ -5,0 +5,0 @@ [![NumberFlow for React](https://number-flow.barvian.me/preview.webp)](https://number-flow.barvian.me)

Fixed alerts

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20783

31.89%

Lines of code

459

42.11%

Number of low quality alerts

1

-50%

Dependency changes

• + Added

  number-flow@0.2.2
  (transitive)

• - Removed

  number-flow@0.2.1
  (transitive)

• Updated

  number-flow@0.2.2