react-scroll-router
v0.0.15
Published
Simple React router based on scrolling page
Downloads
49
Maintainers
Readme
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})} />
LICENSE
MIT