@renemn/use-routed

🛣️ 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.