@react-utilities/vertical-scroll-distance-detector

Detects vertical scroll distance using React Context

Usage no npm install needed!

<script type="module">
  import reactUtilitiesVerticalScrollDistanceDetector from 'https://cdn.skypack.dev/@react-utilities/vertical-scroll-distance-detector';
</script>

README

@react-utilities/vertical-scroll-distance-detector 🏎💨

Typed with TypeScript npm version

Detects the distance that an element has been scrolled with React context.

Install

pnpm install @react-utilities/vertical-scroll-distance-detector

Usage

import React from 'react'
import { 
  VerticalScrollDistanceConsumer, 
  VerticalScrollDistanceProvider,
} from '@react-utilities/vertical-scroll-distance-detector'

function App() {
  return (
    <div className="App">
      <h1>React Context Scroll Distance Detector</h1>
      <VerticalScrollDistanceProvider>
        <VerticalScrollDistanceConsumer>
          {({ verticalScrollDistance }) => (
            <div className="scroll-tracker">
              {verticalScrollDistance}
            </div>
          )}
        </VerticalScrollDistanceConsumer>
      </VerticalScrollDistanceProvider>
    </div>
  )
}

Demo

React Utilities 🏎💨

Utilities for React to simplify development

Everyday components for speeding up React development with little or no extra boilerplate code.

View other React Utilities.