npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ridi/react-router-restore-scroll

v0.0.4

Published

Scroll position restoration for React Router

Downloads

17

Readme

Restore Scroll

npm version

Restore the scroll positions of window and scrollable elements when the user navigates around a React Router app.

demo

Updates for this fork

This is a fork of jshin49/react-router-restore-scroll.

The original library created by Ryan Florence seems to be unmaintained so @jshin49 forked it to support React v16 and fix some other minor issues.

We recommend using node v8.1.2 and the latest npm version in order to use this version, and to use react-router@3.

Major updates:

  1. Removed deprecated usages of React.createClass and React.PropTypes in order to support React v16.
  • Before
import React from 'react'

const RestoreScroll = React.createClass({
...
  propTypes: {
    scrollKey: React.PropTypes.string.isRequired
  },
...
)}
  • After
import React from 'react'
import PropTypes from 'prop-types'
import createReactClass from 'create-react-class'

const RestoreScroll = createReactClass({
...
  propTypes: {
    scrollKey: PropTypes.string.isRequired
  },
...
)}

Referring to

  • https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.createclass
  • https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes
  1. Fixed this repo to directly allow installation with npm (post installation script).
  2. Fixed wrong link in package.json
  3. Fixed not restoring scroll for the first POP action.
  4. Only save scroll position when PUSH or REPLACE action.

Installation:

npm install @ridi/react-router-restore-scroll

or

Add the following in your package.json

...
"@ridi/react-router-restore-scroll": "^0.0.3",
...

and run npm install. If there's an error, remove the node_modules file and try installing again.

Temporarily a Plugin

Plan is to put this into React Router directly, but for now you can plug it in and help us get the bugs out (and write some tests, there aren't any yet!)

Usage

import React from 'react'
import { render } from 'react-dom'
import { Router, browserHistory, applyRouterMiddleware } from 'react-router'
import routes from './routes'

import {
  useHistoryRestoreScroll,
  useRouterRestoreScroll
} from '@ridi/react-router-restore-scroll'

// first enhance a history
const createHistory = useHistoryRestoreScroll(() => browserHistory)

// next create some router middleware
const routerRender = applyRouterMiddleware(
  useRouterRestoreScroll()
)

// then plug them into Router
render(
  <Router
    history={createHistory()}
    render={routerRender}
    routes={routes}
  />,
  document.getElementById('app')
)

Now the window's scroll positions will be automatically restored as you navigate around in a React Router app, and even when you navigate out of and back into it from external sites.

Restores Scrollable Elements Too

If you’ve got scrollable elements (overflow: auto|scroll) they can also be restored with the RestoreScroll component.

import { RestoreScroll } from '@ridi/react-router-restore-scroll'

// then in a component's render method, wrap your scrollable element
// in a `RestoreScroll` component. It needs a `scrollKey`.
<RestoreScroll scrollKey="one">
  <div style={{ height: '200px', overflow: 'auto', border: '1px solid' }}>
    <div style={{ height: '100px', background: 'hsl(0, 50%, 90%)' }}>scroll me</div>
    <div style={{ height: '100px', background: 'hsl(100, 50%, 90%)' }}>two</div>
    <div style={{ height: '100px', background: 'hsl(200, 50%, 90%)' }}>three</div>
  </div>
</RestoreScroll>

Non-React usage

The useHistoryRestoreScroll enhancer gives you a history with a restoreScroll property with three methods that you can use to integrate into any view layer that uses history (cycle.js, etc.).

import createBrowserHistory from 'history/lib/createBrowserHistory'
import useHistoryRestoreScroll from '@ridi/react-router-restore-scroll/lib/useHistoryRestoreScroll'

const history = useHistoryRestoreScroll(createBrowserHistory)()

// call this when a scrollable element is inserted into the dom, where
// `scrollKey` is a globally unique identifier for the node
history.restoreScroll.registerScroller(scrollKey, domNode)

// call this when it's removed from the dom
history.restoreScroll.unregisterScroller(scrollKey)

// call this
// - when the app first renders
// - after the app re-renders after a location change
history.restoreScroll.restoreWindow()

You can look at modules/RestoreWindowScroll.js and modules/RestoreScroll.js to see at which points in a React app these methods are all called.

We'll pull useHistoryRestoreScroll out into it's own package on npm eventually so that this use-case isn't required to bring in stuff that depends on React and React Router.

Difference from taion/scroll-behavior

  • It ties into the router middleware to decide when to restore scroll positions so we don't need workarounds for async routes
  • It restores scroll position of individual elements in addition to the window.
  • It doesn't rely on location.key in preparation for history 3.0
  • It does not have shouldUpdateScroll, but once route is on context we'll be able to implement the old ignoreScroll route prop or maybe a function like shouldUpdateScroll instead.