Alexandrebdry / react-use-scroll-navigate

React use scroll navigate is made as helpers to navigate on your website! In fact, it allow you to scroll to the top of the page while navigate between two pages or navgiate to a specific ref if you want!

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

Visit demo page

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

MIT

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Authors and acknowledgment

• Alexandre BAUDRY
• Amin NAIRI