react-use-scroll-navigate
v3.1.7
Published
A react hook to scroll to the top of the page when navigate to another one
Downloads
15
Maintainers
Readme
React use scroll navigate
This is a react hook that allows you to navigate to a specific section of a page by scrolling to it.
Demo
Installation
npm install react-use-scroll-navigate
Usage
useScrollNavigate
import useScrollNavigate from 'react-use-scroll-navigate';
const App = () => {
const { scrollNavigateError, scrollNavigate } = useScrollNavigate();
return (
<div>
<button onClick={ ()=> {
scrollNavigate('/'); //It will navigate & scroll to the top !
}}>
Go to homepage!
</button>
</div>
);
};
NavigationRef
//Main app
createRoot(document.getElementById("root")).render(
<StrictMode>
<BrowserRouter>
<NavigateContextProvider> {/*Ref navigation scroll navigation works with context*/}
<App /> {/*here is the rooter */}
</NavigateContextProvider>
</BrowserRouter>
</StrictMode>
)
//On one page
export default () => {
const { navigateToRef } = useNavigateContext();
return (
<Fragment>
<h1>About</h1>
<button onClick={() => navigateToRef("/")}>Home</button>
</Fragment>
)
}
// On another page
export default () => {
const { navigationRef } = useNavigateContext();
return (
<Fragment>
<h1>Home</h1>
<div ref={navigationRef} />
</Fragment>
)
}
License
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.