@gmana/react-go-top - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

go-top.esm.js

 import React, { useState } from 'react';
-import styled, { keyframes } from 'styled-components';
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __makeTemplateObject(cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-}
-
-var fadeIn = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0.5;\n  }\n"], ["\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0.5;\n  }\n"])));
-var StyledGoTop = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: 1.5rem;\n  opacity: 0.5;\n  background-color: #a0aec0;\n  position: fixed;\n  cursor: pointer;\n  bottom: 30px;\n  right: 10px;\n  color: #ffffff;\n  z-index: 1000;\n  text-align: center;\n  display: flex;\n  justify-content: center;\n  animation: ", " 0.3s;\n  transition: opacity 0.4s;\n\n\n  &:hover {\n    opacity: 1;\n    background-color: #4a5568;\n  }\n"], ["\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: 1.5rem;\n  opacity: 0.5;\n  background-color: #a0aec0;\n  position: fixed;\n  cursor: pointer;\n  bottom: 30px;\n  right: 10px;\n  color: #ffffff;\n  z-index: 1000;\n  text-align: center;\n  display: flex;\n  justify-content: center;\n  animation: ", " 0.3s;\n  transition: opacity 0.4s;\n\n\n  &:hover {\n    opacity: 1;\n    background-color: #4a5568;\n  }\n"])), fadeIn);
 var GoTop = function GoTop(_a) {
@@ -50,3 +27,4 @@ var _b = _a.startShow,
   window.addEventListener('scroll', checkScrollTop);
-  return show && React.createElement(StyledGoTop, {
+  return show && React.createElement("div", {
+    className: 'gmana-go-top',
     onClick: scrollTop
@@ -66,4 +44,3 @@ }, React.createElement("svg", {
 };
-var templateObject_1, templateObject_2;
 
 export { GoTop };

go-top.umd.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components'], factory) :
-    (global = global || self, factory(global.GoTop = {}, global.React, global.styled));
-}(this, (function (exports, React, styled) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
+  (global = global || self, factory(global.GoTop = {}, global.React));
+}(this, (function (exports, React) { 'use strict';
 
-    var React__default = 'default' in React ? React['default'] : React;
-    var styled__default = 'default' in styled ? styled['default'] : styled;
+  var React__default = 'default' in React ? React['default'] : React;
 
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
+  var GoTop = function GoTop(_a) {
+    var _b = _a.startShow,
+        startShow = _b === void 0 ? 0 : _b;
 
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
+    var _c = React.useState(false),
+        show = _c[0],
+        setShow = _c[1];
 
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
+    var checkScrollTop = function checkScrollTop() {
+      if (!show && window.pageYOffset > startShow) {
+        setShow(true);
+      } else if (show && window.pageYOffset <= startShow) {
+        setShow(false);
+      }
+    };
 
-    function __makeTemplateObject(cooked, raw) {
-        if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-        return cooked;
-    }
+    var scrollTop = function scrollTop() {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      });
+    };
 
-    var fadeIn = styled.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0.5;\n  }\n"], ["\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0.5;\n  }\n"])));
-    var StyledGoTop = styled__default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: 1.5rem;\n  opacity: 0.5;\n  background-color: #a0aec0;\n  position: fixed;\n  cursor: pointer;\n  bottom: 30px;\n  right: 10px;\n  color: #ffffff;\n  z-index: 1000;\n  text-align: center;\n  display: flex;\n  justify-content: center;\n  animation: ", " 0.3s;\n  transition: opacity 0.4s;\n\n\n  &:hover {\n    opacity: 1;\n    background-color: #4a5568;\n  }\n"], ["\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: 1.5rem;\n  opacity: 0.5;\n  background-color: #a0aec0;\n  position: fixed;\n  cursor: pointer;\n  bottom: 30px;\n  right: 10px;\n  color: #ffffff;\n  z-index: 1000;\n  text-align: center;\n  display: flex;\n  justify-content: center;\n  animation: ", " 0.3s;\n  transition: opacity 0.4s;\n\n\n  &:hover {\n    opacity: 1;\n    background-color: #4a5568;\n  }\n"])), fadeIn);
-    var GoTop = function GoTop(_a) {
-      var _b = _a.startShow,
-          startShow = _b === void 0 ? 0 : _b;
+    window.addEventListener('scroll', checkScrollTop);
+    return show && React__default.createElement("div", {
+      className: 'gmana-go-top',
+      onClick: scrollTop
+    }, React__default.createElement("svg", {
+      width: "24px",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor"
+    }, React__default.createElement("path", {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "M5 15l7-7 7 7"
+    })));
+  };
 
-      var _c = React.useState(false),
-          show = _c[0],
-          setShow = _c[1];
+  exports.GoTop = GoTop;
 
-      var checkScrollTop = function checkScrollTop() {
-        if (!show && window.pageYOffset > startShow) {
-          setShow(true);
-        } else if (show && window.pageYOffset <= startShow) {
-          setShow(false);
-        }
-      };
+  Object.defineProperty(exports, '__esModule', { value: true });
 
-      var scrollTop = function scrollTop() {
-        window.scrollTo({
-          top: 0,
-          behavior: 'smooth'
-        });
-      };
-
-      window.addEventListener('scroll', checkScrollTop);
-      return show && React__default.createElement(StyledGoTop, {
-        onClick: scrollTop
-      }, React__default.createElement("svg", {
-        width: "24px",
-        xmlns: "http://www.w3.org/2000/svg",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        stroke: "currentColor"
-      }, React__default.createElement("path", {
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 2,
-        d: "M5 15l7-7 7 7"
-      })));
-    };
-    var templateObject_1, templateObject_2;
-
-    exports.GoTop = GoTop;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
-
 })));

lib/go-top.d.ts

@@ -1,2 +0,3 @@
-export interface GoTopProps {
+import './go-top.css';
+interface GoTopProps {
     startShow?: number;
@@ -3,0 +4,0 @@ }

package.json

 {
   "name": "@gmana/react-go-top",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "author": {
@@ -25,4 +25,3 @@ "name": "Sun Sreng",
   "peerDependencies": {
-    "react": ">=16",
-    "styled-components": ">=5"
+    "react": ">=16"
   },
@@ -29,0 +28,0 @@ "main": "./go-top.umd.js",

README.md

@@ -7,12 +7,11 @@ # React Go Top
 
-`npm i @gmana/react-go-top`
+- `npm i @gmana/react-go-top`
+  or
+- `yarn add @gmana/react-go-top`
 
-or
-
-`yarn add @gmana/react-go-top`
-
 ## Usage
 
 ```tsx
-import { GoTop } from '@gmana/go-top';
+import { GoTop } from '@gmana/react-go-top';
+import '@gmana/react-go-top/go-top.esm.css';
 
@@ -19,0 +18,0 @@ <GoTop />

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

Dependency count

1

decreased by-50%

Number of package files

8

increased by33.33%

Lines of code

168

increased by26.32%

Worsened metrics

Total package byte prevSize

5114

decreased by-39.94%

Number of lines in readme file

27

decreased by-3.57%

No dependency changes