https://github.com/neo/react-use-scroll-position

A react hook to use scroll position
https://github.com/neo/react-use-scroll-position

react react-hook react-hooks scroll

Last synced: 3 months ago
JSON representation

A react hook to use scroll position

• Host: GitHub
• URL: https://github.com/neo/react-use-scroll-position
• Owner: neo
• License: mit
• Created: 2019-01-19T15:50:42.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-06-01T17:50:06.000Z (about 5 years ago)
• Last Synced: 2024-01-07T11:11:07.193Z (6 months ago)
• Topics: react, react-hook, react-hooks, scroll
• Language: TypeScript
• Homepage:
• Size: 13.7 KB
• Stars: 45
• Watchers: 3
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-react-hooks - `react-use-scroll-position`
• awesome-react-hooks-cn - `react-use-scroll-position`
• awesome-react-hooks - `react-use-scroll-position`
• fucking-awesome-react-hooks - `react-use-scroll-position`
• awesome-react-hooks - `react-use-scroll-position`

README

        
# react-use-scroll-position

[![npm package](https://img.shields.io/npm/v/react-use-scroll-position.svg)](https://www.npmjs.com/package/react-use-scroll-position) ![](https://img.shields.io/npm/types/react-use-scroll-position.svg)

A [react hook](https://reactjs.org/docs/hooks-intro.html) to use scroll position.

## Usage

### In a React functional component:

```tsx

import React from 'react';

// Usually you would just need to import one of the following

import { useScrollPosition, useScrollXPosition, useScrollYPosition } from 'react-use-scroll-position';

function Example() {

  const { x, y } = useScrollPosition();

  const scrollX = useScrollXPosition();

  const scrollY = useScrollYPosition();

  return (

    <>

      


        {x} should equal to {scrollX}.

      

      


        {y} should equal to {scrollY}.

      

    >

  );

}

```


### In a custom React hook

```tsx

import { useScrollPosition } from 'react-use-scroll-position';

function useYourImagination() {

  const { x, y } = useScrollPosition();

  return getSomethingAwesomeWith(x, y);

}

```

# Implementation details

The scroll event handler is throttled by `requestAnimationFrame`.