0.1.0 • Published 2 years ago
@enrico-dgr/vertical-routing-react v0.1.0
Vertical Routing For React
Installation
yarn add @enrico-dgr/vertical-routing-react
or
npm i --save @enrico-dgr/vertical-routing-react
Tested on:
Usage
// Page.tsx (or .jsx)
import React from "react";
// your components
import First from "path/to/First";
import Second from "path/to/Second";
import Third from "path/to/Third";
// library
import { Routes } from "@enrico-dgr/vertical-routing-react";
const Page = () => {
return (
<Routes
baseAbsolutePath="/page"
routes={[
{
path: "first", // --> /page/first
element: <First />,
},
{
path: "second", // --> /page/second
element: <Second />,
},
{
path: "third", // --> /page/third
element: <Third />,
},
]}
/>
);
};
export default Page;
// Nav.tsx (or .jsx)
import React from "react";
import { scroll } from "@enrico-dgr/vertical-routing-react";
const Nav = () => {
const goToFirst = () => {
// It finds the first path
// which includes 'first'
scroll("first");
// or scroll('/page/first');
// for exact match.
};
const goToSecond = () => {
scroll("second");
};
const goToThird = () => {
scroll("third");
};
return (
<nav>
<button onClick={goToFirst}>First</button>
<button onClick={goToSecond}>Second</button>
<button onClick={goToThird}>Third</button>
</nav>
);
};
export default Nav;
Usage with react-router-dom
Tested with:
// Routing.tsx (or .jsx)
import React from "react";
// your components
import Page from "path/to/Page"; // the component `Page` above
// react-router-dom
import { useRoutes } from "react-router-dom";
const Routing = () =>
useRoutes([
{
path: "/",
element: <div>...</div>,
},
{
path: "page/*", // wildcard needed
element: <Page />,
},
]);
export default Routing;
// Nav.tsx (or .jsx)
import React from "react";
import { scroll } from "@enrico-dgr/vertical-routing-react";
import { useNavigate } from "react-router-dom";
const Nav = () => {
const navigate = useNavigate();
const goToFirst = () => {
scroll("first");
// common use
navigate("first");
};
const goToSecond = () => {
scroll("second");
navigate("second");
};
const goToThird = () => {
scroll("third");
navigate("third");
};
return (
<nav>
<button onClick={goToFirst}>First</button>
<button onClick={goToSecond}>Second</button>
<button onClick={goToThird}>Third</button>
</nav>
);
};
export default Nav;
With custom hook
// useNavigation.tsx (or .jsx)
// for jsx, remove types
import React from "react";
import { scroll } from "@enrico-dgr/vertical-routing-react";
import {
NavigateOptions,
To,
useNavigate as useNavigateRouter,
} from "react-router-dom";
const useNavigate = () => {
const navigate = useNavigateRouter();
return (to: To, options?: NavigateOptions | undefined) => {
navigate(to, options);
let path = "";
if (typeof to === "string") {
path = to;
} else {
path = to.pathname ?? "";
}
scroll(path);
};
};
export default useNavigate;
// Nav.tsx (or .jsx)
import useNavigate from "path/to/useNavigate";
const Nav = () => {
const navigate = useNavigate();
const goToFirst = () => {
navigate("first");
};
const goToSecond = () => {
navigate("second");
};
const goToThird = () => {
navigate("third");
};
return <nav>...</nav>;
};
export default Nav;
Example
0.1.0
2 years ago