@studio-freight/react-locomotive-scroll - npm Package Compare versions

Comparing version 0.3.3 to 0.3.5

lib/@types/locomotive-scroll.d.ts

@@ -182,7 +182,9 @@ // Credits: https://github.com/locomotivemtl/locomotive-scroll/pull/38/commits/8a112a4ec21fa7262372123262e15a82ddf053b7
       target: Node | string | number,
-      offset?: number,
-      duration?: number,
-      easing?: [number, number, number, number],
-      disableLerp?: boolean,
-      callback?: () => void
+      options: {
+        offset?: number
+        callback?: () => void
+        duration?: number
+        easing?: [number, number, number, number]
+        disableLerp?: boolean
+      }
     ): void
@@ -189,0 +191,0 @@ setScroll(x: number, y: number): void

module/index.d.ts

 export type { LocomotiveScrollOptions, Scroll, ScrollInstance } from 'locomotive-scroll';
 export { LocomotiveScrollContext, LocomotiveScrollProvider } from './LocomotiveScroll.context';
-export type { LocomotiveScrollContextValue, LocomotiveScrollProviderProps } from './LocomotiveScroll.context';
+export type { LocomotiveScrollContextValue, LocomotiveScrollProviderProps, } from './LocomotiveScroll.context';
 export { useLocomotiveScroll } from './useLocomotiveScroll.hook';

module/LocomotiveScroll.context.d.ts

@@ -12,7 +12,9 @@ import { LocomotiveScrollOptions, Scroll } from 'locomotive-scroll';
     watch: DependencyList | undefined;
-    debounce: number;
+    onUpdate?: (scroll: Scroll) => void;
+    location?: string;
+    onLocationChange?: (scroll: Scroll) => void;
 }
-export declare function LocomotiveScrollProvider({ children, options, containerRef, watch, debounce }: WithChildren<LocomotiveScrollProviderProps>): JSX.Element;
+export declare function LocomotiveScrollProvider({ children, options, containerRef, watch, onUpdate, location, onLocationChange, }: WithChildren<LocomotiveScrollProviderProps>): JSX.Element;
 export declare namespace LocomotiveScrollProvider {
     var displayName: string;
 }

module/LocomotiveScroll.context.js

@@ -7,4 +7,4 @@ "use strict";
 const react_1 = require("react");
-const use_debounce_1 = require("use-debounce");
-const use_resize_observer_1 = (0, tslib_1.__importDefault)(require("use-resize-observer"));
+const react_use_1 = require("react-use");
+const use_resize_observer_1 = tslib_1.__importDefault(require("use-resize-observer"));
 exports.LocomotiveScrollContext = (0, react_1.createContext)({
@@ -14,7 +14,7 @@ scroll: null,
 });
-function LocomotiveScrollProvider({ children, options, containerRef, watch, debounce = 1000 }) {
+function LocomotiveScrollProvider({ children, options, containerRef, watch, onUpdate, location, onLocationChange, }) {
     const { height: containerHeight } = (0, use_resize_observer_1.default)({ ref: containerRef });
     const [isReady, setIsReady] = (0, react_1.useState)(false);
     const LocomotiveScrollRef = (0, react_1.useRef)(null);
-    const [height] = (0, use_debounce_1.useDebounce)(containerHeight, debounce);
+    const [height] = (0, react_use_1.useDebounce)(() => containerHeight, 100);
     if (!watch) {
@@ -25,5 +25,5 @@ console.warn('react-locomotive-scroll: you did not add any props to watch. Scroll may have weird behaviours if the instance is not updated when the route changes');
         ;
-        (() => (0, tslib_1.__awaiter)(this, void 0, void 0, function* () {
+        (() => tslib_1.__awaiter(this, void 0, void 0, function* () {
             try {
-                const LocomotiveScroll = (yield Promise.resolve().then(() => (0, tslib_1.__importStar)(require('locomotive-scroll')))).default;
+                const LocomotiveScroll = (yield Promise.resolve().then(() => tslib_1.__importStar(require('locomotive-scroll')))).default;
                 const dataScrollContainer = document.querySelector('[data-scroll-container]');
@@ -47,6 +47,20 @@ if (!dataScrollContainer) {
     (0, react_1.useEffect)(() => {
-        var _a;
-        (_a = LocomotiveScrollRef.current) === null || _a === void 0 ? void 0 : _a.update();
+        if (!LocomotiveScrollRef.current) {
+            return;
+        }
+        LocomotiveScrollRef.current.update();
+        if (onUpdate) {
+            onUpdate(LocomotiveScrollRef.current);
+        }
     }, watch ? [...watch, height] : [height]);
-    return ((0, jsx_runtime_1.jsx)(exports.LocomotiveScrollContext.Provider, Object.assign({ value: { scroll: LocomotiveScrollRef.current, isReady } }, { children: children }), void 0));
+    (0, react_1.useEffect)(() => {
+        if (!LocomotiveScrollRef.current || !location) {
+            return;
+        }
+        LocomotiveScrollRef.current.update();
+        if (onLocationChange) {
+            onLocationChange(LocomotiveScrollRef.current);
+        }
+    }, [location]);
+    return ((0, jsx_runtime_1.jsx)(exports.LocomotiveScrollContext.Provider, Object.assign({ value: { scroll: LocomotiveScrollRef.current, isReady } }, { children: children })));
 }
@@ -53,0 +67,0 @@ exports.LocomotiveScrollProvider = LocomotiveScrollProvider;

module/useLocomotiveScroll.hook.js

@@ -7,5 +7,11 @@ "use strict";
 function useLocomotiveScroll() {
-    return (0, react_1.useContext)(LocomotiveScroll_context_1.LocomotiveScrollContext);
+    const context = (0, react_1.useContext)(LocomotiveScroll_context_1.LocomotiveScrollContext);
+    (0, react_1.useEffect)(() => {
+        if (!context.scroll) {
+            console.warn('react-locomotive-scroll: the context is missing. You may be using the hook without registering LocomotiveScrollProvider, or you may be using the hook in a component which is not wrapped by LocomotiveScrollProvider.');
+        }
+    }, [context.scroll]);
+    return context;
 }
 exports.useLocomotiveScroll = useLocomotiveScroll;
 useLocomotiveScroll.displayName = 'useLocomotiveScroll';

package.json

 {
   "name": "@studio-freight/react-locomotive-scroll",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "A locomotive-scroll React wrapper",
@@ -8,7 +8,4 @@ "main": "module/index.js",
   "typings": "module/index.d.ts",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/studio-freight/react-locomotive-scroll"
-  },
-  "author": "arzafran <[e-mail]>",
+  "repository": "[e-mail]:studio-freight/react-locomotive-scroll.git",
+  "author": "Antoine <[e-mail]>",
   "license": "MIT",
@@ -51,33 +48,28 @@ "keywords": [
   "dependencies": {
-    "locomotive-scroll": "^4.1.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "use-debounce": "^7.0.1",
-    "use-resize-observer": "^8.0.0"
+    "react-use": "^17.4.0",
+    "use-resize-observer": "9.0.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^15.0.0",
-    "@commitlint/config-conventional": "^15.0.0",
-    "@release-it/conventional-changelog": "^3.3.0",
-    "@types/react": "^17.0.37",
-    "@typescript-eslint/eslint-plugin": "^5.7.0",
-    "@typescript-eslint/parser": "^5.7.0",
-    "commitizen": "^4.2.4",
-    "dotenv-cli": "^4.1.1",
-    "eslint": "^8.4.1",
-    "eslint-config-prettier": "^8.3.0",
-    "husky": "^7.0.4",
-    "lint-staged": "^12.1.2",
-    "prettier": "^2.5.1",
-    "prettier-plugin-organize-imports": "^2.3.4",
-    "release-it": "^14.11.8",
-    "typescript": "^4.5.4"
+    "@commitlint/cli": "17.0.2",
+    "@commitlint/config-conventional": "17.0.2",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@types/react": "18.0.10",
+    "@typescript-eslint/eslint-plugin": "5.27.0",
+    "@typescript-eslint/parser": "5.27.0",
+    "commitizen": "4.2.4",
+    "dotenv-cli": "^5.1.0",
+    "eslint": "8.16.0",
+    "eslint-config-prettier": "8.5.0",
+    "husky": "8.0.1",
+    "lint-staged": "13.0.0",
+    "prettier": "2.6.2",
+    "prettier-plugin-organize-imports": "2.3.4",
+    "release-it": "^15.0.0",
+    "tslib": "^2.4.0",
+    "typescript": "4.7.2"
   },
-  "bugs": {
-    "url": "https://github.com/toinelin/react-locomotive-scroll/issues"
-  },
-  "homepage": "https://github.com/toinelin/react-locomotive-scroll#readme",
-  "directories": {
-    "lib": "lib"
+  "peerDependencies": {
+    "locomotive-scroll": "^4.1.4",
+    "react": "^17.0.2"
   }
 }

README.md

 <!-- PROJECT LOGO -->
 <br />
 <p align="center">
-  <a href="https://github.com/toinelin/react-locomotive-scroll">
+  <a href="https://github.com/@studio-freight/react-locomotive-scroll">
     <img src="https://user-images.githubusercontent.com/4596862/58807621-67aeec00-85e6-11e9-8e3a-3fe4123ee76c.png" alt="Logo" width="80" height="80">
@@ -17,7 +17,7 @@ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png" alt="Logo" height="60">
     <br />
-    <!-- <a href="https://github.com/toinelin/react-locomotive-scroll">View Demo</a>
+    <!-- <a href="https://github.com/@studio-freight/react-locomotive-scroll">View Demo</a>
     · -->
-    <a href="https://github.com/toinelin/react-locomotive-scroll/issues">Report Bug</a>
+    <a href="https://github.com/@studio-freight/react-locomotive-scroll/issues">Report Bug</a>
     ·
-    <a href="https://github.com/toinelin/react-locomotive-scroll/issues">Request Feature</a>
+    <a href="https://github.com/@studio-freight/react-locomotive-scroll/issues">Request Feature</a>
   </p>
@@ -29,19 +29,18 @@ </p>
 <!-- TABLE OF CONTENTS -->
-<details open="open">
-  <summary><h2 style="display: inline-block">Table of Contents</h2></summary>
-  <ol>
-    <li>
-      <a href="#getting-started">Getting Started</a>
-      <ul>
-        <li><a href="#prerequisites">Prerequisites</a></li>
-        <li><a href="#installation">Installation</a></li>
-      </ul>
-    </li>
-    <li><a href="#usage">Usage</a></li>
-    <li><a href="#contributing">Contributing</a></li>
-    <li><a href="#license">License</a></li>
-    <li><a href="#contact">Contact</a></li>
-    <li><a href="#acknowledgements">Acknowledgements</a></li>
-  </ol>
-</details>
+<summary><h2 style="display: inline-block">Table of Contents</h2></summary>
+<ol>
+  <li>
+    <a href="#getting-started">Getting Started</a>
+    <ul>
+      <li><a href="#prerequisites">Prerequisites</a></li>
+      <li><a href="#installation">Installation</a></li>
+    </ul>
+  </li>
+  <li><a href="#usage">Usage</a></li>
+  <li><a href="#usage">Specific cases</a></li>
+  <li><a href="#contributing">Contributing</a></li>
+  <li><a href="#license">License</a></li>
+  <li><a href="#contact">Contact</a></li>
+  <li><a href="#acknowledgements">Acknowledgements</a></li>
+</ol>
 
@@ -55,3 +54,3 @@ ## Getting Started
 ```sh
-$ npm install locomotive-scroll react-locomotive-scroll
+$ npm install locomotive-scroll @studio-freight/react-locomotive-scroll
 ```
@@ -62,3 +61,3 @@
 ```sh
-$ yarn add locomotive-scroll react-locomotive-scroll
+$ yarn add locomotive-scroll @studio-freight/react-locomotive-scroll
 ```
@@ -73,3 +72,3 @@
 ```js
-import { LocomotiveScrollProvider } from 'react-locomotive-scroll'
+import { LocomotiveScrollProvider } from '@studio-freight/react-locomotive-scroll'
 ```
@@ -90,3 +89,5 @@
     [
-      //...all the dependencies you want to watch to update the scroll
+      //..all the dependencies you want to watch to update the scroll.
+      //  Basicaly, you would want to watch page/location changes
+      //  For exemple, on Next.js you would want to watch properties like `router.asPath` (you may want to add more criterias if the instance should be update on locations with query parameters)
     ]
@@ -114,2 +115,5 @@ }
 
+From the Locomotive Scroll doc : `Defines a scrollable section. Splitting your page into sections may improve performance.`
+You may want to use `data-scroll-section` on each page which may be wrapped by `LocomotiveScrollProvider`
+
 ### 4. Add the base styles to your CSS file.
@@ -121,3 +125,3 @@
 ```js
-import { useLocomotiveScroll } from 'react-locomotive-scroll'
+import { useLocomotiveScroll } from '@studio-freight/react-locomotive-scroll'
 
@@ -135,2 +139,39 @@ export function Component() {
 
+## Specific cases
+
+### 1. Apply code to the location update only
+
+If you want to write some code applied only when the location change but not when the rest of your dependencies added to the `watch` list change, here the thing:
+
+First, remove the location props from the `watch` dependencies list and add it to the `location` props.
+
+> `@studio-freight/react-locomotive-scroll` will update the scroll instance as it should, but in a different `useEffect` than the one used to update watched dependencies
+
+```js
+const { pathname } = useLocation() // With react-router
+const { asPath } = useRouter() // With next/router
+
+<LocomotiveScrollProvider
+  options={
+    {
+      smooth: true,
+      // ... all available Locomotive Scroll instance options 
+    }
+  }
+  watch={
+    [
+      //...all the dependencies you want to watch to update the scroll EXCEPT the location one
+    ]
+  }
+  location={asPath}
+  containerRef={containerRef}
+  onLocationChange={scroll => scroll.scrollTo(0, { duration: 0, disableLerp: true })} // If you want to reset the scroll position to 0 for example
+  onUpdate={() => console.log('Updated, but not on location change!')} // Will trigger on 
+>
+  <main data-scroll-container ref={containerRef}>
+    {/* ...your app */}
+  </main>
+</LocomotiveScrollProvider>
+```
+
 <!-- CONTRIBUTING -->
@@ -161,3 +202,3 @@ ## Contributing
 
-Project Link: [https://github.com/toinelin/react-locomotive-scroll](https://github.com/toinelin/react-locomotive-scroll)
+Project Link: [https://github.com/@studio-freight/react-locomotive-scroll](https://github.com/@studio-freight/react-locomotive-scroll)
 
@@ -164,0 +205,0 @@

New alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25923

increased by15.05%

Dependency count

4

decreased by-20%

Lines of code

407

increased by14.33%

Number of lines in readme file

223

increased by22.53%

Worsened metrics

Dev dependency count

17

increased by6.25%

Number of low maintenance alerts

1

increased byInfinity%

Number of low quality alerts

2

increased by100%

Number of low supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact-use@^17.4.0

• + Added@babel/runtime@7.26.0(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@types/js-cookie@2.2.7(transitive)

• + Added@xobotyi/scrollbar-width@1.9.5(transitive)

• + Addedcopy-to-clipboard@3.3.3(transitive)

• + Addedcss-in-js-utils@3.1.0(transitive)

• + Addedcss-tree@1.1.3(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addederror-stack-parser@2.1.4(transitive)

• + Addedfast-deep-equal@3.1.3(transitive)

• + Addedfast-shallow-equal@1.0.0(transitive)

• + Addedfastest-stable-stringify@2.0.2(transitive)

• + Addedhyphenate-style-name@1.1.0(transitive)

• + Addedinline-style-prefixer@7.0.1(transitive)

• + Addedjs-cookie@2.2.1(transitive)

• + Addedmdn-data@2.0.14(transitive)

• + Addednano-css@5.6.2(transitive)

• + Addedreact@18.3.119.0.0(transitive)

• + Addedreact-dom@18.3.119.0.0(transitive)

• + Addedreact-universal-interface@0.6.2(transitive)

• + Addedreact-use@17.6.0(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedresize-observer-polyfill@1.5.1(transitive)

• + Addedrtl-css-js@1.16.1(transitive)

• + Addedscheduler@0.23.20.25.0(transitive)

• + Addedscreenfull@5.2.0(transitive)

• + Addedset-harmonic-interval@1.0.1(transitive)

• + Addedsource-map@0.5.60.6.1(transitive)

• + Addedstack-generator@2.0.10(transitive)

• + Addedstackframe@1.3.4(transitive)

• + Addedstacktrace-gps@3.1.2(transitive)

• + Addedstacktrace-js@2.0.2(transitive)

• + Addedstylis@4.3.5(transitive)

• + Addedthrottle-debounce@3.0.1(transitive)

• + Addedtoggle-selection@1.0.6(transitive)

• + Addedts-easing@0.2.0(transitive)

• + Addedtslib@2.8.1(transitive)

• + Addeduse-resize-observer@9.0.0(transitive)

• - Removedlocomotive-scroll@^4.1.3

• - Removedreact@^17.0.2

• - Removedreact-dom@^17.0.2

• - Removeduse-debounce@^7.0.1

• - Removedreact-dom@17.0.2(transitive)

• - Removedscheduler@0.20.2(transitive)

• - Removeduse-debounce@7.0.1(transitive)

• - Removeduse-resize-observer@8.0.0(transitive)

• Updateduse-resize-observer@9.0.0