GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → ipatate → React Router Scroll Memory

ipatate / React Router Scroll Memory

Licence: mit
React component to keep the scroll of the page and to restore it if the user clicks on the back button of its browser

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

reactrouterscrollingrestore

Projects that are alternatives of or similar to React Router Scroll Memory

Nettygateway
NettyGateway is a HTTP proxy server with flexible routing rules.
Stars: ✭ 73 (-23.16%)
Mutual labels:  router
Drouter
Android Router Framework
Stars: ✭ 80 (-15.79%)
Mutual labels:  router
Go Tgbot
Golang telegram bot API wrapper, session-based router and middleware
Stars: ✭ 90 (-5.26%)
Mutual labels:  router
Cv4pve Barc
Backup And Restore Ceph for Proxmox VE
Stars: ✭ 74 (-22.11%)
Mutual labels:  restore
Rdiffweb
A simplified backup management software for quick access to your archives through an efficient web interface.
Stars: ✭ 76 (-20%)
Mutual labels:  restore
Lit Element Router
A LitElement Router (1278 bytes gzip)
Stars: ✭ 85 (-10.53%)
Mutual labels:  router
Jennet
A simple HTTP web framework written in Pony
Stars: ✭ 72 (-24.21%)
Mutual labels:  router
Chi
lightweight, idiomatic and composable router for building Go HTTP services
Stars: ✭ 10,581 (+11037.89%)
Mutual labels:  router
Bareos Webui
Bareos Web User Interface
Stars: ✭ 78 (-17.89%)
Mutual labels:  restore
Literoute
LiteRoute is easy transition for your app. Written on Swift 4
Stars: ✭ 90 (-5.26%)
Mutual labels:  router
Floatthead
Fixed <thead>. Doesn't need any custom css/html. Does what position:sticky can't
Stars: ✭ 1,193 (+1155.79%)
Mutual labels:  scrolling
Hookrouter
The flexible, and fast router for react that is entirely based on hooks
Stars: ✭ 1,200 (+1163.16%)
Mutual labels:  router
Routegen
Define your API and SPA routes in one place. Use them anywhere. Only 1.3kb.
Stars: ✭ 86 (-9.47%)
Mutual labels:  router
I2p.i2p
I2P is an anonymizing network, offering a simple layer that identity-sensitive applications can use to securely communicate. All data is wrapped with several layers of encryption, and the network is both distributed and dynamic, with no trusted parties.
Stars: ✭ 1,186 (+1148.42%)
Mutual labels:  router
Django Infinite Scroll Pagination
🌀 Pagination based on the seek method / keyset paging / offset-less pagination
Stars: ✭ 90 (-5.26%)
Mutual labels:  scrolling
Highway
Highway - A Modern Javascript Transitions Manager
Stars: ✭ 1,185 (+1147.37%)
Mutual labels:  router
Barba
Create badass, fluid and smooth transition between your website's pages.
Stars: ✭ 9,372 (+9765.26%)
Mutual labels:  router
Beluganos
The new network OS designed for white-box switches based on open API.
Stars: ✭ 95 (+0%)
Mutual labels:  router
Parallaxscrollingview
Parallax scrolling either by offset or automatically.
Stars: ✭ 91 (-4.21%)
Mutual labels:  scrolling
Bone
Lightning Fast HTTP Multiplexer
Stars: ✭ 1,270 (+1236.84%)
Mutual labels:  router
View All Similar Projects ➔

Build Status

For React Router V4/V5. React component to keep the scroll of the page and to restore it if the user clicks on the previous button of its browser

You have solution in this page https://reacttraining.com/react-router/web/guides/scroll-restoration for just scrolling to top on navigation on every transition. But if you click on the previous button, the page is also at the top even if you had scrolled on the page.

I did this package because I was frustrated that the new react router (4) does not restore the scroll when I click on the back button of my browser. By default, the component execute window.scrollTo(0,0), if the url not exist in memory.

only work with react and react router v4 and v5

Npm page

https://www.npmjs.com/package/react-router-scroll-memory

Installation

  • install package

    $ npm i -S react-router-scroll-memory

  • import component in your main page.

import ScrollMemory from 'react-router-scroll-memory';
  • add the component after the Router.
  <BrowserRouter>
    <div>
      <ScrollMemory />
      <App />
    </div>
  </BrowserRouter>

New Feature

If you use your app inside a element, you can use props "elementID" for memorise scroll position of your element instead body scroll.

Tested on Browser:

  • Chrome
  • Explorer 11
  • Edge
  • Safari
  • Firefox

Online exemple

https://simple-react-app-with-router.stackblitz.io

Screenshots

  • Without the component The scroll keep the position on transition and the scroll of new page is not to top.

./without_scroll_memory

  • With the component The new page is top and if i click previous, the scroll is restored.

./with_scroll_memory

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].