# react-restore-scroll

> Remember and restore React scroll position for the nodes. This also works nicely with NextJS.

Latest version **1.2.2** (published 2022-03-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-restore-scroll
pnpm add react-restore-scroll
yarn add react-restore-scroll
bun add react-restore-scroll
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2022-03-24 |
| First published | 2022-03-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 7.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Heng Sok |
| Maintainers | charles22 |
| Keywords | react, scroll, scroll-position, restore scroll, nextjs |

## Links

- npm: https://www.npmjs.com/package/react-restore-scroll
- Repository: https://github.com/hengsok/react-restore-scroll
- Homepage: https://github.com/hengsok/react-restore-scroll#readme
- Issues: https://github.com/hengsok/react-restore-scroll/issues
- npm.io page: https://npm.io/package/react-restore-scroll

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.2 (latest) — 2022-03-24
- 1.2.1 — 2022-03-21
- 1.2.0 — 2022-03-21
- 1.1.3 — 2022-03-21
- 1.1.2 — 2022-03-21
- 1.1.1 — 2022-03-21
- 1.1.0 — 2022-03-21

## README

# react-restore-scroll

ScrollPosition HOC which remembers attached node scroll position and restores it.

This project is originally written by https://github.com/bonnevoyager/react-scroll-position and is ported to using Functional Component by Heng Sok as React functional component has better performance than React component. Also add proper types.

This module also has been tested working with NextJS. 

What it does is by wrapping scrollable div on a page and remembers its scroll position onMount and onUnmount of the HTML div element. Just make sure that scrollKey for each page must be unique, preferably using the path of the webpage. For NextJS, can use router.pathname as scrollKey.

## Installation

```
npm install --save react-restore-scroll
or
yarn add react-restore-scroll
```

## Usage
### Typescript example with React Functional Component

```ts

import ScrollPosition, { ScrollPositionChildrenProps } from 'react-restore-scroll'
import { useRouter } from "next/router";

const Page = (props) => (

    const router = useRouter();

    return
      (
        <ScrollPosition scrollKey={router.pathname}>
          {
            ({ rContainer, getScroll, getScrollNode, setScroll }: ScrollPositionChildrenProps) =>
              <div ref={rContainer}>
                other page content
              </div>
          }
        </ScrollPosition>
      )
)


```
Note that scrollKey can be any unique string. You can even pass "/some-page".

ScrollPosition HOC uses children as function and returns functions which can be used to manipulate the scrolling.



#### getScroll

Gets attached `node` x and y scroll positions.

#### getScrollNode

Gets attached HTMLElement `node`.

#### setScroll

Sets attached `node` x and y scroll positions.

## License

[MIT](LICENSE)

---
_Source: https://npm.io/package/react-restore-scroll · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._