https://github.com/aaronhayes/react-scroll-hook

The easiest way to detect current element in view when using react-scroll
https://github.com/aaronhayes/react-scroll-hook

hooks react react-hooks react-scroll scroll scrollspy

Last synced: 11 months ago
JSON representation

The easiest way to detect current element in view when using react-scroll

• Host: GitHub
• URL: https://github.com/aaronhayes/react-scroll-hook
• Owner: aaronhayes
• License: mit
• Created: 2019-11-01T10:45:00.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T23:54:25.000Z (about 3 years ago)
• Last Synced: 2025-03-12T17:50:47.606Z (11 months ago)
• Topics: hooks, react, react-hooks, react-scroll, scroll, scrollspy
• Language: TypeScript
• Size: 575 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React Scroll Hook

[![npm (scoped)](https://img.shields.io/npm/v/@aaronhayes/react-scroll-hook?style=flat-square)](https://www.npmjs.com/package/@aaronhayes/react-scroll-hook)

[![Bundle Size](https://img.shields.io/bundlephobia/min/@aaronhayes/react-scroll-hook?style=flat-square)](https://bundlephobia.com/result?p=@aaronhayes/react-scroll-hook)

![License](https://img.shields.io/npm/l/@aaronhayes/react-scroll-hook?style=flat-square)

Hook for watching vertical scrolling location when using [React Scroll](https://github.com/fisshy/react-scroll)

## Install

```

$ npm install --save @aaronhayes/react-scroll-hook

```

```

$ yarn add @aaronhayes/react-scroll-hook

```

## Usage

```TypeScript

import { Link, Element , Events, animateScroll as scroll, scrollSpy, scroller } from 'react-scroll'

import useScrollSpy from '@aaronhayes/react-scroll-hook';

const MyScrollWatchingComponent = () => {

    const location = useScrollSpy();

    console.log(location);

    // Location will either be undefined or the current element scrolled to.

    return (

        


            


                You are currently scrolled to: {location}

            

        

    )

}


```

## See Also

- [React Scroll](https://github.com/fisshy/react-scroll)