scroll-lock-react

A React component to lock scrolling on a section of your webpage and provide a scroll-based counter to its children.

Features

• Locks scrolling within a section.
• Passes a live counter prop to child components based on scroll position.
• Responsive and easy to integrate.

Installation

npm install scroll-lock-react

Usage

import ScrollLock from 'scroll-lock-react';

const MyComponent = () => (
  <ScrollLock id="my-section" maxCount={100} duration={30}>
    <MyChildComponent />
  </ScrollLock>
);

// MyChildComponent will receive a `counter` prop
const MyChildComponent = ({ counter }) => (
  <div>Scroll Counter: {Math.round(counter)}</div>
);

Props

| Prop | Type | Required | Description | |-----------|----------|----------|-----------------------------------------------------------------------------| | id | string | Yes | Unique identifier for the scroll lock section. | | maxCount| number | Yes | The maximum value the counter can reach as you scroll through the section. | | duration| number | Yes | Controls the height of the scrollable area (influences scroll sensitivity). | | children| ReactNode| Yes | Child component(s) to render inside the scroll lock. |

How the counter Works

• As you scroll through the ScrollLock section, a counter value is calculated based on your scroll position.
• This counter is passed as a prop to each child element of ScrollLock if the child is a valid React element.
• The value of counter ranges from 0 to maxCount.
• The counter updates in real-time as the user scrolls or touches the section.

Example: Accessing the Counter

<ScrollLock id="demo" maxCount={50} duration={20}>
  <MyChildComponent />
</ScrollLock>

const MyChildComponent = ({ counter }) => (
  <div>Current value: {counter}</div>
);

Styling

The component includes a default CSS file for layout and sticky positioning. You can override these styles by targeting the following classes:

• .lock-scroll
• .counter-view
• .sticky-element

License

MIT