react-scroll-to-top - npm Package Compare versions

Comparing version 0.1.7 to 0.2.0

lib/ScrollToTop.d.ts

@@ -5,4 +5,5 @@ import React from "react";
     color?: string;
+    smooth?: boolean;
 };
 declare const ScrollToTop: React.FC<Props & React.HTMLAttributes<HTMLButtonElement>>;
 export default ScrollToTop;

lib/ScrollToTop.js

@@ -24,8 +24,17 @@ var __assign = (this && this.__assign) || function () {
 import React, { useState, useEffect } from "react";
-function scrollToTop() {
-    document.documentElement.scrollTop = 0;
+function scrollToTop(smooth) {
+    if (smooth === void 0) { smooth = false; }
+    if (smooth) {
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth"
+        });
+    }
+    else {
+        document.documentElement.scrollTop = 0;
+    }
 }
 var ScrollToTop = function (_a) {
-    var _b = _a.top, top = _b === void 0 ? 20 : _b, className = _a.className, _c = _a.color, color = _c === void 0 ? "black" : _c, props = __rest(_a, ["top", "className", "color"]);
-    var _d = useState(false), visible = _d[0], setVisible = _d[1];
+    var _b = _a.top, top = _b === void 0 ? 20 : _b, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.color, color = _d === void 0 ? "black" : _d, _e = _a.smooth, smooth = _e === void 0 ? false : _e, props = __rest(_a, ["top", "className", "color", "smooth"]);
+    var _f = useState(false), visible = _f[0], setVisible = _f[1];
     useEffect(function () {
@@ -39,3 +48,3 @@ document.addEventListener("scroll", onScroll);
     };
-    return (React.createElement(React.Fragment, null, visible && (React.createElement("button", __assign({ className: className + " scroll-to-top", onClick: scrollToTop }, props),
+    return (React.createElement(React.Fragment, null, visible && (React.createElement("button", __assign({ className: className + " scroll-to-top", onClick: function () { return scrollToTop(smooth); } }, props),
         React.createElement("svg", { fill: color, viewBox: "0 0 256 256" },
@@ -42,0 +51,0 @@ React.createElement("path", { d: "M222.138,91.475l-89.6-89.6c-2.5-2.5-6.551-2.5-9.051,0l-89.6,89.6c-2.5,2.5-2.5,6.551,0,9.051s6.744,2.5,9.244,0L122,21.85  V249.6c0,3.535,2.466,6.4,6,6.4s6-2.865,6-6.4V21.85l78.881,78.676c1.25,1.25,2.992,1.875,4.629,1.875s3.326-0.625,4.576-1.875  C224.586,98.025,224.638,93.975,222.138,91.475z" }))))));

package.json

 {
   "name": "react-scroll-to-top",
   "author": "Herman Nygaard",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "main": "lib/ScrollToTop.js",
@@ -51,3 +51,6 @@ "types": "lib/ScrollToTop.d.ts",
     ]
+  },
+  "dependencies": {
+    "@types/classnames": "^2.2.10"
   }
-}
+}

README.md

@@ -32,12 +32,16 @@ # react-scroll-to-top
 
-| Prop      | Type   | Description                              | Default |
-| --------- | ------ | ---------------------------------------- | ------- |
-| top       | number | The height where the button gets visible | 20      |
-| color     | string | The arrow color                          | black   |
-| bgColor   | string | Button background color                  | white   |
-| className | string | Custom classname to add your own styling |         |
-| style     | Object | Object to override styling               |         |
+| Prop      | Type    | Description                              | Default |
+| --------- | ------- | ---------------------------------------- | ------- |
+| top       | number  | The height where the button gets visible | 20      |
+| color     | string  | The arrow color                          | black   |
+| bgColor   | string  | Button background color                  | white   |
+| className | string  | Custom classname to add your own styling | ''      |
+| style     | Object  | Object to override styling               |         |
+| smooth    | boolean | Whether to use smooth scrolling*         | false   |
 
+Smooth scrolling uses a newer `window.scrollTo` implementation.\
+[Check out its support in browsers at MDN web docs](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo).
+
 ## Types
 
 Written in TypeScript, no need for @types installation

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6399

increased by5.19%

Number of lines in readme file

47

increased by9.3%

Worsened metrics

Dependency count

2

increased by100%

Number of package files

5

decreased by-16.67%

Lines of code

60

decreased by-7.69%

Dependency changes

• + Added@types/classnames@^2.2.10

• + Added@types/classnames@2.3.4(transitive)

• + Addedclassnames@2.5.1(transitive)