{"library":"react-router-scroll","title":"React Router Scroll Management","description":"react-router-scroll is a middleware for React Router versions 2.x and 3.x, providing advanced scroll management capabilities for web applications. It allows developers to customize scroll behavior during route transitions, enabling features like scrolling to the top of the page, to specific pixel coordinates, or to named HTML elements based on routing events. The library internally uses `scroll-behavior` for its core functionality. The current stable version is 0.4.4, with the last notable release in 2017. Due to fundamental changes in React Router v4 and subsequent versions (which removed the router middleware concept), this library is not compatible with modern React Router setups. It is considered abandoned for new projects utilizing React Router v4, v5, or v6, with no active development or planned compatibility updates for newer React Router APIs.","language":"javascript","status":"abandoned","last_verified":"Tue Apr 21","install":{"commands":["npm install react-router-scroll"],"cli":null},"imports":["import { useScroll } from 'react-router-scroll';","import { ScrollContainer } from 'react-router-scroll';","import { applyRouterMiddleware } from 'react-router';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { applyRouterMiddleware, browserHistory, Router } from 'react-router';\nimport { useScroll } from 'react-router-scroll';\n\n// Define your routes (example)\nconst routes = {\n  path: '/',\n  component: ({ children }) => (\n    <div>\n      <h1>Welcome</h1>\n      {children}\n    </div>\n  ),\n  indexRoute: { component: () => <p>Home Page Content</p> },\n  childRoutes: [\n    { path: 'about', component: () => <p>About Us Content</p> },\n    { path: 'contact', component: () => <p>Contact Us Content</p> }\n  ]\n};\n\nReactDOM.render(\n  <Router\n    history={browserHistory}\n    routes={routes}\n    render={applyRouterMiddleware(useScroll())}\n  />,\n  document.getElementById('root')\n);\n","lang":"javascript","description":"This example demonstrates basic setup for `react-router-scroll` with React Router v2/v3, applying `useScroll` as a router middleware to manage default browser-style scroll behavior on route transitions.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}