@renemn/use-routed
v0.1.3
Published
React hook that renders routed components (pages).
Downloads
4
Readme
🛣️ use-routed
Ridiculously simplified way to render routed components with History api. Useful for quick prototypes or small projects.
Install
npm install --save use-routed
Usage
import React from "react";
import useRouted, { Link, navigate } from "use-routed";
function Home() {
const [username, setUsername] = React.useState("");
return (
<section>
<p>What's your name?</p>
<input type="text" onChange={e => setUsername(e.target.value)} />
<button onClick={() => username && navigate(`/${username}`)}>Ok</button>
</section>
);
}
function User({ username }) {
return (
<section>
<p>Hi {username}!</p>
<Link href="/">Return</Link>
</section>
);
}
const routes = {
"/": Home,
"/:username": User
};
export default function App() {
const routedComponent = useRouted(routes);
return <div className="app">{routedComponent}</div>;
}
useRouted
Pass the available routes and the hook will return a component based on the window location.
const routedComponent = useRouted({ "/": Home, "/about" About });
Link
Navigates between pages by using the pathanmes set. It replaces anchor's default behavior.
<Link href="/about">
navigate
Simulates navigation by updating popstate from a given URL. Use any of the paths passed on the initial configuration.
navigate("/about");
paginate
Helper that creates a pagination object from a set of given items. Use it with React.useMemo
for perfomance boost.
const { currentItems, numOfPages } = React.useMemo(
() => paginate(someItems, somePage, itemsPerPage),
[someItems, somePage, itemsPerPage]
);
Example
The example is a simple Gists Previewer that shows the public gists from a given user.
Run yarn start
at example folder.
License
MIT © renemonroy
This hook is created using create-react-hook.