react-use-window-scroll - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

.eslintrc.js

@@ -50,2 +50,4 @@ // [lock-all/] 🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫🚫
   '@typescript-eslint/no-empty-interface': 'off', // Disable empty interface error
+  '@typescript-eslint/no-explicit-any': 'warn', // Warn on any
+  '@typescript-eslint/no-unused-vars': 'warn', // Warn for unused vars
 };
@@ -52,0 +54,0 @@ /** Rules specific to JS. */

dist/stories/useScrollBy.stories.d.ts

 /// <reference types="react" />
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const SScrollByStory: {
-    (): JSX.Element;
-    story: {
-        name: string;
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react';
+declare const StoryComponent: () => import("react").JSX.Element;
+declare const meta: Meta<typeof StoryComponent>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const HookVisual: Story;

dist/stories/useScrollBy.stories.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SScrollByStory = void 0;
-const react_1 = __importDefault(require("react"));
-const useScrollBy_1 = require("../hooks/useScrollBy");
-// A Storybook is a collection of stories. Each story represents a single visual state of a component.
-// Technically, a story is a function that returns something that can be rendered to screen.
-// The default export defines metadata that applies to the group.
-const title = 'Stories/useScrollBy';
-exports.default = {
-    title: title,
+exports.HookVisual = void 0;
+const UseScrollByStoryComponent_1 = require("./UseScrollByStoryComponent");
+// === Setup ===
+const StoryComponent = UseScrollByStoryComponent_1.UseScrollByStoryComponent; // <-- Set to your component
+const meta = {
+    title: 'Stories/useScrollBy', // <-- Set to your story title
+    component: StoryComponent,
+    parameters: {
+        options: { showPanel: false }, // Don't show addons panel
+    },
 };
-const paragraphCount = 3;
-const paragraphs = Array(paragraphCount)
-    .fill(paragraphCount)
-    .map((i) => {
-    return (react_1.default.createElement("p", { key: `p${Math.random()}` }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum tortor id eros dignissim vulputate. Morbi orci sapien, suscipit ac massa sed, interdum tempus ante. Aliquam tincidunt turpis id arcu blandit, eu euismod erat pulvinar. Praesent sed urna a ligula sagittis malesuada. Phasellus dapibus fringilla ligula. Etiam augue nulla, bibendum vitae luctus quis, aliquam ac sapien. Cras condimentum ac ex a dignissim. Sed lectus est, euismod sed laoreet vitae, euismod vitae mauris. Phasellus malesuada sem dolor, vitae facilisis tortor vulputate a. Duis posuere vitae augue quis molestie. Cras at orci eu nulla porttitor sagittis sed vel ante."));
-});
-const lotsOfText = react_1.default.createElement("div", null, paragraphs);
-// The named exports define the stories
-// Needed to wrap the hook and give it visual representation.
-const ScrollHookComponent = () => {
-    const scrollBy = (0, useScrollBy_1.useScrollBy)();
-    const scrollButtons = (react_1.default.createElement("div", { style: { border: 'solid 1px #cccccc', padding: '10px' } },
-        react_1.default.createElement("div", null,
-            react_1.default.createElement("h4", null, "scrollBy using number args:"),
-            react_1.default.createElement("button", { onClick: () => scrollBy(0, 0) }, "0, 0"),
-            ' ',
-            react_1.default.createElement("button", { onClick: () => scrollBy(200, 200) }, "200, 200"),
-            ' ',
-            react_1.default.createElement("button", { onClick: () => scrollBy(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER) }, "Max safe integer"),
-            ' ',
-            react_1.default.createElement("button", { onClick: () => scrollBy(-200, -200) }, "-200, -200"),
-            ' ',
-            react_1.default.createElement("button", { onClick: () => scrollBy(Number.MIN_SAFE_INTEGER, Number.MIN_SAFE_INTEGER) }, "Min safe integer")),
-        react_1.default.createElement("div", null,
-            react_1.default.createElement("h4", null, "scrollBy using options arg:"),
-            react_1.default.createElement("button", { onClick: () => scrollBy({ top: 0, left: 0 }) }, "0, 0"),
-            ' ',
-            react_1.default.createElement("button", { onClick: () => scrollBy({ top: 200, left: 200 }) }, "200, 200"),
-            ' ',
-            react_1.default.createElement("button", { onClick: () => scrollBy({ top: Number.MAX_SAFE_INTEGER, left: Number.MAX_SAFE_INTEGER }) }, "Max safe integer"),
-            ' ',
-            react_1.default.createElement("button", { onClick: () => scrollBy({ top: -200, left: -200 }) }, "-200, -200"),
-            ' ',
-            react_1.default.createElement("button", { onClick: () => scrollBy({ top: Number.MIN_SAFE_INTEGER, left: Number.MIN_SAFE_INTEGER }) }, "Min safe integer")),
-        react_1.default.createElement("div", null,
-            react_1.default.createElement("h4", null, "scrollBy using smooth behavior:"),
-            react_1.default.createElement("button", { onClick: () => scrollBy({ top: 0, left: 0, behavior: 'smooth' }) }, "0, 0"),
-            ' ',
-            react_1.default.createElement("button", { onClick: () => scrollBy({ top: 200, left: 200, behavior: 'smooth' }) }, "200, 200"),
-            ' ',
-            react_1.default.createElement("button", { onClick: () => scrollBy({ top: Number.MAX_SAFE_INTEGER, left: Number.MAX_SAFE_INTEGER, behavior: 'smooth' }) }, "Max safe integer"),
-            ' ',
-            react_1.default.createElement("button", { onClick: () => scrollBy({ top: -200, left: -200, behavior: 'smooth' }) }, "-200, -200"),
-            ' ',
-            react_1.default.createElement("button", { onClick: () => scrollBy({ top: Number.MIN_SAFE_INTEGER, left: Number.MIN_SAFE_INTEGER, behavior: 'smooth' }) }, "Min safe integer"))));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        scrollButtons,
-        lotsOfText,
-        scrollButtons,
-        lotsOfText,
-        scrollButtons,
-        lotsOfText,
-        scrollButtons,
-        lotsOfText,
-        scrollButtons,
-        lotsOfText,
-        scrollButtons));
-};
-const SScrollByStory = () => react_1.default.createElement(ScrollHookComponent, null);
-exports.SScrollByStory = SScrollByStory;
-exports.SScrollByStory.story = {
-    name: 'Hook Visual',
-};
+exports.default = meta;
+// === Stories ===
+exports.HookVisual = {};

dist/stories/useScrollTo.stories.d.ts

 /// <reference types="react" />
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const ScrollToStory: {
-    (): JSX.Element;
-    story: {
-        name: string;
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react';
+declare const StoryComponent: () => import("react").JSX.Element;
+declare const meta: Meta<typeof StoryComponent>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const HookVisual: Story;

dist/stories/useScrollTo.stories.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollToStory = void 0;
-const react_1 = __importDefault(require("react"));
-const useScrollTo_1 = require("../hooks/useScrollTo");
-// A Storybook is a collection of stories. Each story represents a single visual state of a component.
-// Technically, a story is a function that returns something that can be rendered to screen.
-// The default export defines metadata that applies to the group.
-const title = 'Stories/useScrollTo';
-exports.default = {
-    title: title,
+exports.HookVisual = void 0;
+const UseScrollToStoryComponent_1 = require("./UseScrollToStoryComponent");
+// === Setup ===
+const StoryComponent = UseScrollToStoryComponent_1.UseScrollToStoryComponent; // <-- Set to your component
+const meta = {
+    title: 'Stories/useScrollTo', // <-- Set to your story title
+    component: StoryComponent,
+    parameters: {
+        options: { showPanel: false }, // Don't show addons panel
+    },
 };
-const paragraphCount = 20;
-const paragraphs = Array(paragraphCount)
-    .fill(paragraphCount)
-    .map((i) => {
-    return (react_1.default.createElement("p", { key: `p${Math.random()}` }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum tortor id eros dignissim vulputate. Morbi orci sapien, suscipit ac massa sed, interdum tempus ante. Aliquam tincidunt turpis id arcu blandit, eu euismod erat pulvinar. Praesent sed urna a ligula sagittis malesuada. Phasellus dapibus fringilla ligula. Etiam augue nulla, bibendum vitae luctus quis, aliquam ac sapien. Cras condimentum ac ex a dignissim. Sed lectus est, euismod sed laoreet vitae, euismod vitae mauris. Phasellus malesuada sem dolor, vitae facilisis tortor vulputate a. Duis posuere vitae augue quis molestie. Cras at orci eu nulla porttitor sagittis sed vel ante."));
-});
-const lotsOfText = react_1.default.createElement("div", null, paragraphs);
-// The named exports define the stories
-// Needed to wrap the hook and give it visual representation.
-const ScrollHookComponent = () => {
-    const scrollTo = (0, useScrollTo_1.useScrollTo)();
-    // Scroll on first render
-    react_1.default.useEffect(() => {
-        scrollTo(0, 0);
-    }, [scrollTo]);
-    const scrollButtons = (react_1.default.createElement("div", { style: { border: 'solid 1px #cccccc', padding: '10px' } },
-        react_1.default.createElement("div", null,
-            react_1.default.createElement("h4", null, "scrollTo using number args:"),
-            react_1.default.createElement("button", { onClick: () => scrollTo(0, 0) }, "0, 0"),
-            ' ',
-            react_1.default.createElement("button", { onClick: () => scrollTo(200, 200) }, "200, 200"),
-            ' ',
-            react_1.default.createElement("button", { onClick: () => scrollTo(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER) }, "max safe integer")),
-        react_1.default.createElement("div", null,
-            react_1.default.createElement("h4", null, "scrollTo using options arg:"),
-            react_1.default.createElement("button", { onClick: () => scrollTo({ top: 0, left: 0 }) }, "0, 0"),
-            ' ',
-            react_1.default.createElement("button", { onClick: () => scrollTo({ top: 200, left: 200 }) }, "200, 200"),
-            ' ',
-            react_1.default.createElement("button", { onClick: () => scrollTo({ top: Number.MAX_SAFE_INTEGER, left: Number.MAX_SAFE_INTEGER }) }, "max safe integer")),
-        react_1.default.createElement("div", null,
-            react_1.default.createElement("h4", null, "scrollTo using smooth behavior:"),
-            react_1.default.createElement("button", { onClick: () => scrollTo({ top: 0, left: 0, behavior: 'smooth' }) }, "0, 0"),
-            ' ',
-            react_1.default.createElement("button", { onClick: () => scrollTo({ top: 200, left: 200, behavior: 'smooth' }) }, "200, 200"),
-            ' ',
-            react_1.default.createElement("button", { onClick: () => scrollTo({ top: Number.MAX_SAFE_INTEGER, left: Number.MAX_SAFE_INTEGER, behavior: 'smooth' }) }, "max safe integer"))));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        scrollButtons,
-        lotsOfText,
-        scrollButtons));
-};
-const ScrollToStory = () => react_1.default.createElement(ScrollHookComponent, null);
-exports.ScrollToStory = ScrollToStory;
-exports.ScrollToStory.story = {
-    name: 'Hook Visual',
-};
+exports.default = meta;
+// === Stories ===
+exports.HookVisual = {};

LICENSE.md

 MIT License
 
-Copyright © 2023 Justin Mahar https://github.com/justinmahar
+Copyright © 2024 Justin Mahar https://github.com/justinmahar
 
@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

package.json

 {
   "name": "react-use-window-scroll",
-  "version": "1.1.1",
-  "coreVersion": "2.4.9",
+  "version": "1.1.2",
+  "coreVersion": "3.0.5",
   "author": "Justin Mahar <[e-mail]>",
@@ -14,5 +14,5 @@ "description": "React hooks for scrolling the page to any location, or by any amount. Supports smooth scrolling.",
     "start": "npm run storybook",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "preship": "npm run build && git add dist && git diff-index --quiet HEAD || git commit -m \"Build, version, and publish.\" && npm version patch -m \"Build, version, and publish.\"",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "preship": "npm run build && git diff-index HEAD && npm version patch -m \"Build, version, and publish.\"",
     "ship": "npm publish --access public",
@@ -32,4 +32,4 @@ "postship": "git push",
   "peerDependencies": {
-    "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
-    "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0"
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0",
+    "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0"
   },
@@ -40,30 +40,30 @@ "dependencies": {
   "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@mdx-js/react": "^1.6.22",
-    "@storybook/addon-actions": "^6.5.15",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/addon-links": "^6.5.15",
-    "@storybook/builder-webpack5": "^6.5.15",
-    "@storybook/manager-webpack5": "^6.5.15",
-    "@storybook/react": "^6.5.15",
+    "@storybook/addon-docs": "^7.6.12",
+    "@storybook/addon-essentials": "^7.6.12",
+    "@storybook/addon-viewport": "^7.6.12",
+    "@storybook/blocks": "^7.6.12",
+    "@storybook/react": "^7.6.12",
+    "@storybook/react-webpack5": "^7.6.12",
+    "@types/react": "^18.2.53",
     "@types/smoothscroll-polyfill": "^0.3.1",
-    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/parser": "^5.48.1",
-    "babel-loader": "^9.1.2",
-    "eslint": "^8.31.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.11",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.10",
-    "lockblocks": "^1.1.1",
-    "prettier": "^2.8.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-html-props": "^1.0.32",
+    "eslint-plugin-storybook": "^0.6.15",
+    "lockblocks": "^1.1.4",
+    "prettier": "^3.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-html-props": "^2.0.3",
     "react-markdown": "^8.0.3",
-    "replace-in-file": "^6.3.5",
-    "typescript": "^4.9.4",
-    "webpack": "^5.75.0"
+    "remark-gfm": "^3.0.1",
+    "replace-in-file": "^7.1.0",
+    "storybook": "^7.6.12",
+    "typescript": "^5.3.3",
+    "webpack": "^5.90.1"
   }
 }

README.md

@@ -10,5 +10,9 @@ <h2 align="center">
   <a href="https://github.com/justinmahar/react-use-window-scroll/" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/GitHub-Source-success" alt="View project on GitHub" /></a>&nbsp;
-  <a href="https://github.com/justinmahar/react-use-window-scroll/actions?query=workflow%3ADeploy" target="_blank" rel="noopener noreferrer"><img src="https://github.com/justinmahar/react-use-window-scroll/workflows/Deploy/badge.svg" alt="Deploy Status" /></a>&nbsp;
-  <a href="https://github.com/sponsors/justinmahar" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86" alt="Sponsor"/></a>
+  <a href="https://github.com/justinmahar/react-use-window-scroll/actions?query=workflow%3ADeploy" target="_blank" rel="noopener noreferrer"><img src="https://github.com/justinmahar/react-use-window-scroll/workflows/Deploy/badge.svg" alt="Deploy Status" /></a>
 </p>
+<!-- [lock:donate-badges] 🚫--------------------------------------- -->
+<p align="center">
+  <a href="https://ko-fi.com/justinmahar"><img src="https://img.shields.io/static/v1?label=Buy%20me%20a%20coffee&message=%E2%9D%A4&logo=KoFi&color=%23fe8e86" alt="Buy me a coffee" /></a>&nbsp;<a href="https://github.com/sponsors/justinmahar" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86" alt="Sponsor"/></a>
+</p>
+<!-- [/lock:donate-badges] ---------------------------------------🚫 -->
 
@@ -45,22 +49,12 @@ ## Documentation
 
-[lock:donate]::🚫---------------------------------------
+<!-- [lock:donate] 🚫--------------------------------------- -->
 
 ## Donate 
 
-I hope this project makes your life a little easier! If it does and you'd like to show your appreciation, consider supporting the project with a coffee or sponsorship. 
+If this project helped you, please consider buying me a coffee or sponsoring me. Your support is much appreciated!
 
-Your support helps keep the project going and will earn you some serious virtual high fives. Maybe even a virtual fist bump if you're feeling extra cool.
+<a href="https://ko-fi.com/justinmahar"><img src="https://img.shields.io/static/v1?label=Buy%20me%20a%20coffee&message=%E2%9D%A4&logo=KoFi&color=%23fe8e86" alt="Buy me a coffee" /></a>&nbsp;<a href="https://github.com/sponsors/justinmahar" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86" alt="Sponsor"/></a>
 
-<a href="https://github.com/sponsors/justinmahar">
-  <img src="https://justinmahar.github.io/react-kindling/support/sponsor.png" alt="Sponsor via GitHub" height="35" />
-</a> <a href="https://paypal.me/thejustinmahar/5">
-  <img src="https://justinmahar.github.io/react-kindling/support/coffee-1.png" alt="Buy me a coffee" height="35" />
-</a> <a href="https://paypal.me/thejustinmahar/15">
-  <img src="https://justinmahar.github.io/react-kindling/support/coffee-3.png" alt="Buy me 3 coffees" height="35" />
-</a> <a href="https://paypal.me/thejustinmahar/25">
-  <img src="https://justinmahar.github.io/react-kindling/support/coffee-5.png" alt="Buy me 5 coffees" height="35" />
-</a>
+<!-- [/lock:donate] ---------------------------------------🚫 -->
 
-[/lock:donate]::---------------------------------------🚫
-
 ## Table of Contents 
@@ -139,3 +133,3 @@
 
-[lock:typescript]::🚫---------------------------------------
+<!-- [lock:typescript] 🚫--------------------------------------- -->
 
@@ -146,5 +140,5 @@ ## TypeScript
 
-[/lock:typescript]::---------------------------------------🚫
+<!-- [/lock:typescript] ---------------------------------------🚫 -->
 
-[lock:icon]::🚫---------------------------------------
+<!-- [lock:icon] 🚫--------------------------------------- -->
 
@@ -155,5 +149,5 @@ ## Icon Attribution
 
-[/lock:icon]::---------------------------------------🚫
+<!-- [/lock:icon] ---------------------------------------🚫 -->
 
-[lock:contributing]::🚫---------------------------------------
+<!-- [lock:contributing] 🚫--------------------------------------- -->
 
@@ -168,3 +162,3 @@ ## Contributing
 
-[/lock:contributing]::---------------------------------------🚫
+<!-- [/lock:contributing] --------------------------------------🚫 -->
 
@@ -171,0 +165,0 @@ ## ⭐ Found It Helpful? [Star It!](https://github.com/justinmahar/react-use-window-scroll/stargazers)

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

248783

increased by2.08%

Number of package files

38

increased by18.75%

Lines of code

642

increased by4.22%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Number of lines in readme file

165

decreased by-3.51%

No dependency changes