scroll-lock-react 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nedralia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/bundle.css

@@ -0,0 +1,25 @@
+.index_lock-scroll__pjkCC {
+    width: 100%;
+    z-index: 9999;
+
+    @media (max-width: 746px) {
+        display: none;
+    }
+}
+
+.index_counter-view__ZNIa7 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}
+
+.index_sticky-element__bB-ax {
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height:100vh;
+    overflow: hidden;
+}

package/dist/bundle.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).ScrollLock=t(e.React)}(this,function(e){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);return({id:t,children:o,duration:r,maxCount:c})=>{const[l,i]=e.useState(0),u=e.useRef(null),s=e.useCallback(()=>{const e=-(u.current?.getBoundingClientRect().top??0),t=u.current?.offsetHeight??0,n=window.innerHeight-80;if(e<0)return 0;const o=e/(t-n);if(o>1)return c;const r=o*c;return Math.min(Math.max(r,0),c)},[u.current?.offsetHeight,c]);e.useEffect(()=>{const e=()=>{const e=s();i(e)};return window.addEventListener("scroll",e),()=>{window.removeEventListener("scroll",e)}},[]);const a=e.useCallback(e=>{e.preventDefault();const t=s();i(t)},[s]);e.useEffect(()=>(window.addEventListener("touchmove",a),()=>{window.removeEventListener("touchmove",a)}),[a]);const d=10*r+"px";return n.default.createElement("div",{className:"lock-scroll",ref:u,style:{height:d}},n.default.createElement("div",{className:"sticky-element"},n.default.createElement("div",{className:"counter-view"},n.default.Children.map(o,e=>n.default.isValidElement(e)?n.default.cloneElement(e,{counter:l}):e))))}});
+//# sourceMappingURL=bundle.js.map

package/dist/bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle.js","sources":["../src/index.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport './index.css'\n\ninterface ScrollLockProps {\n  id: string\n  maxCount: number\n  duration: number\n  children: React.ReactNode\n}\n\ninterface ScrollLockChildProps {\n  counter: number\n}\n\nconst ScrollLock = ({ id, children, duration, maxCount }: ScrollLockProps): React.ReactElement => {\n  const [count, setCount] = useState(0)\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const calculateCount = useCallback((): number => {\n    const refYPosition = -(ref.current?.getBoundingClientRect().top ?? 0)\n    const elementHeight = ref.current?.offsetHeight ?? 0\n    const navbarHeight = 80\n    const screenHeight = window.innerHeight - navbarHeight\n\n    if (refYPosition < 0) {\n      return 0\n    }\n\n    const relativePosition = refYPosition / (elementHeight - screenHeight)\n\n    if (relativePosition > 1) {\n      return maxCount\n    }\n\n    const count = relativePosition * maxCount\n    return Math.min(Math.max(count, 0), maxCount)\n  },\n  [\n    ref.current?.offsetHeight,\n    maxCount\n  ])\n\n  // Handle scroll\n  useEffect(() => {\n    const handleScroll = (): void => {\n      const count = calculateCount()\n      setCount(count)\n    }\n\n    window.addEventListener('scroll', handleScroll)\n    return () => { window.removeEventListener('scroll', handleScroll) }\n  }, [])\n\n  const handleTouchMove = useCallback((e: TouchEvent) => {\n    e.preventDefault()\n    const count = calculateCount()\n    setCount(count)\n  }, [calculateCount])\n\n  // Handle touch events\n  useEffect(() => {\n    window.addEventListener('touchmove', handleTouchMove)\n    return () => {\n      window.removeEventListener('touchmove', handleTouchMove)\n    }\n  }, [handleTouchMove])\n\n  // TODO: Add optional progress bar to show how far the user has scrolled in the section\n\n  const height = `${duration * 10}px` // Set this constant and the page y should be the same for every view port\n\n  return (\n    <div className=\"lock-scroll\" ref={ref} style={{ height }}>\n      <div className='sticky-element'>\n        <div className=\"counter-view\">\n          {React.Children.map(children, (child) => {\n            if (React.isValidElement<ScrollLockChildProps>(child)) {\n              return React.cloneElement(child, { counter: count })\n            }\n            return child;\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default ScrollLock\n"],"names":["id","children","duration","maxCount","count","setCount","useState","ref","useRef","calculateCount","useCallback","refYPosition","current","getBoundingClientRect","top","elementHeight","offsetHeight","screenHeight","window","innerHeight","relativePosition","Math","min","max","useEffect","handleScroll","addEventListener","removeEventListener","handleTouchMove","e","preventDefault","height","React","createElement","className","style","Children","map","child","isValidElement","cloneElement","counter"],"mappings":"qWAemB,EAAGA,KAAIC,WAAUC,WAAUC,eAC5C,MAAOC,EAAOC,GAAYC,EAAQA,SAAC,GAE7BC,EAAMC,SAAuB,MAE7BC,EAAiBC,EAAAA,YAAY,KACjC,MAAMC,IAAiBJ,EAAIK,SAASC,wBAAwBC,KAAO,GAC7DC,EAAgBR,EAAIK,SAASI,cAAgB,EAE7CC,EAAeC,OAAOC,YADP,GAGrB,GAAIR,EAAe,EACjB,OAAO,EAGT,MAAMS,EAAmBT,GAAgBI,EAAgBE,GAEzD,GAAIG,EAAmB,EACrB,OAAOjB,EAGT,MAAMC,EAAQgB,EAAmBjB,EACjC,OAAOkB,KAAKC,IAAID,KAAKE,IAAInB,EAAO,GAAID,IAEtC,CACEI,EAAIK,SAASI,aACbb,IAIFqB,EAAAA,UAAU,KACR,MAAMC,EAAe,KACnB,MAAMrB,EAAQK,IACdJ,EAASD,IAIX,OADAc,OAAOQ,iBAAiB,SAAUD,GAC3B,KAAQP,OAAOS,oBAAoB,SAAUF,KACnD,IAEH,MAAMG,EAAkBlB,cAAamB,IACnCA,EAAEC,iBACF,MAAM1B,EAAQK,IACdJ,EAASD,IACR,CAACK,IAGJe,EAAAA,UAAU,KACRN,OAAOQ,iBAAiB,YAAaE,GAC9B,KACLV,OAAOS,oBAAoB,YAAaC,KAEzC,CAACA,IAIJ,MAAMG,EAAuB,GAAX7B,EAAH,KAEf,OACE8B,UAAAC,cAAA,MAAA,CAAKC,UAAU,cAAc3B,IAAKA,EAAK4B,MAAO,CAAEJ,WAC9CC,EAAAA,QAAKC,cAAA,MAAA,CAAAC,UAAU,kBACbF,EAAAA,QAAAC,cAAA,MAAA,CAAKC,UAAU,gBACZF,EAAK,QAACI,SAASC,IAAIpC,EAAWqC,GACzBN,EAAK,QAACO,eAAqCD,GACtCN,EAAAA,QAAMQ,aAAaF,EAAO,CAAEG,QAASrC,IAEvCkC"}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './index.css';
+interface ScrollLockProps {
+    id: string;
+    maxCount: number;
+    duration: number;
+    children: React.ReactNode;
+}
+declare const ScrollLock: ({ id, children, duration, maxCount }: ScrollLockProps) => React.ReactElement;
+export default ScrollLock;

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "scroll-lock-react",
+  "version": "1.0.0",
+  "description": "A React component to lock scrolling on the webpage.",
+  "main": "dist/bundle.js",
+  "module": "dist/bundle.js",
+  "scripts": {
+    "build": "rollup -c",
+    "start": "rollup -c -w"
+  },
+  "keywords": [
+    "react",
+    "scroll",
+    "lock"
+  ],
+  "author": "Nedralia",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@types/node": "^25.0.9",
+    "@types/react": "^18.2.0",
+    "rollup": "^2.56.3",
+    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.30.0",
+    "typescript": "^4.4.3"
+  },
+  "types": "dist/index.d.ts"
+}

package/rollup.config.js

@@ -0,0 +1,26 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import postcss from 'rollup-plugin-postcss';
+import { terser } from 'rollup-plugin-terser';
+
+export default {
+  input: 'src/index.tsx',
+  output: {
+    file: 'dist/bundle.js',
+    format: 'umd',
+    name: 'ScrollLock',
+    sourcemap: true,
+  },
+  plugins: [
+    resolve(),
+    commonjs(),
+    typescript(),
+    postcss({
+      modules: true,
+      extract: true,
+    }),
+    terser(),
+  ],
+  external: ['react', 'react-dom'],
+};

package/src/index.css

@@ -0,0 +1,25 @@
+.lock-scroll {
+    width: 100%;
+    z-index: 9999;
+
+    @media (max-width: 746px) {
+        display: none;
+    }
+}
+
+.counter-view {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}
+
+.sticky-element {
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height:100vh;
+    overflow: hidden;
+}

package/src/index.tsx

@@ -0,0 +1,90 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+
+import './index.css'
+
+interface ScrollLockProps {
+  id: string
+  maxCount: number
+  duration: number
+  children: React.ReactNode
+}
+
+interface ScrollLockChildProps {
+  counter: number
+}
+
+const ScrollLock = ({ id, children, duration, maxCount }: ScrollLockProps): React.ReactElement => {
+  const [count, setCount] = useState(0)
+
+  const ref = useRef<HTMLDivElement>(null)
+
+  const calculateCount = useCallback((): number => {
+    const refYPosition = -(ref.current?.getBoundingClientRect().top ?? 0)
+    const elementHeight = ref.current?.offsetHeight ?? 0
+    const navbarHeight = 80
+    const screenHeight = window.innerHeight - navbarHeight
+
+    if (refYPosition < 0) {
+      return 0
+    }
+
+    const relativePosition = refYPosition / (elementHeight - screenHeight)
+
+    if (relativePosition > 1) {
+      return maxCount
+    }
+
+    const count = relativePosition * maxCount
+    return Math.min(Math.max(count, 0), maxCount)
+  },
+  [
+    ref.current?.offsetHeight,
+    maxCount
+  ])
+
+  // Handle scroll
+  useEffect(() => {
+    const handleScroll = (): void => {
+      const count = calculateCount()
+      setCount(count)
+    }
+
+    window.addEventListener('scroll', handleScroll)
+    return () => { window.removeEventListener('scroll', handleScroll) }
+  }, [])
+
+  const handleTouchMove = useCallback((e: TouchEvent) => {
+    e.preventDefault()
+    const count = calculateCount()
+    setCount(count)
+  }, [calculateCount])
+
+  // Handle touch events
+  useEffect(() => {
+    window.addEventListener('touchmove', handleTouchMove)
+    return () => {
+      window.removeEventListener('touchmove', handleTouchMove)
+    }
+  }, [handleTouchMove])
+
+  // TODO: Add optional progress bar to show how far the user has scrolled in the section
+
+  const height = `${duration * 10}px` // Set this constant and the page y should be the same for every view port
+
+  return (
+    <div className="lock-scroll" ref={ref} style={{ height }}>
+      <div className='sticky-element'>
+        <div className="counter-view">
+          {React.Children.map(children, (child) => {
+            if (React.isValidElement<ScrollLockChildProps>(child)) {
+              return React.cloneElement(child, { counter: count })
+            }
+            return child;
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ScrollLock

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "jsx": "react",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "baseUrl": "./src",
+    "paths": {
+      "@/*": ["*"]
+    },
+    "declaration": true,
+    "outDir": "dist"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}