React-scroll-router NPM

A React package for routing between sections on a single page application

Quick Start

Setup Provider

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

import { ScrollProvider } from "react-scroll-router";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ScrollProvider>
      <App />
    </ScrollProvider>
  </React.StrictMode>
);

Add routes

import { ScrollRoute } from "react-scroll-router";

function App() {
  return (
    <div>
      <ScrollRoute route="/" children={<ExampleHeaderComponent />} />
      <ScrollRoute
        route="/section"
        children={<ExampleSectionComponent />}
        pageTitle="Sample page title"
      />
      <ScrollRoute route="/footer" children={<ExampleFooterComponent />} />
    </div>
  );
}

Components

<ScrollProvider ... />

Props

Prop	Type	Description	Required
defaultRoute	`string`	Default route - by default set to `'/'`
options	`ScrollRouterOptions`	Configuration options for react-scroll-router. It partially overrides the default values

<ScrollRoute ... />

Props

Prop	Type	Description	Required
route	`string`	Route name	:white_check_mark:
children	`ReactNode`	Route content	:white_check_mark:
containerStyle	`React.CSSProperties`	Additional styles applied to the container

API

useScrollRouter()

export const useScrollRouter: () => {
  route: string;
  goToNextRoute: (nextRoute: string, pageTitle?: string) => void;
  options: ScrollRouterOptions;
};

Returns `{route,goToNextRoute,options}`

Variable	Type	Description
route	`string`	Current route
goToNextRoute	`Function`	Function to manually navigate to the next route. Replace or push a new route depending on the `options.historyMethod`
options	`ScrollRouterOptions`	Options object provided in `<ScrollProvider ... />`

useScrollToRoute()

export const useScrollToRoute: () => ({route: string; scrollOptions?: ScrollIntoViewOptions}) => void;

Returns `Function` that can scroll your page to the selected route

  const scrollToRoute = useScrollToRoute()
  const scrollOptions = {behavior: "smooth"} // By default behavior value is set to "smooth"

  <button onClick={()=> scrollToRoute({route:'/section', scrollOptions})} />