spotlight-react

Getting starter

npm i react react-dom react-router-dom spotlight-react

Usage

// index.js
import ReactDOM from "react-dom";
import Router from "./Router";

import "spotlight-react/dist/spotlight-react.css";

ReactDOM.render(<Router />, document.querySelector("#root"));

// Router.jsx
import { Spotlight, useSpotlight } from "spotlight-react";

export default function Router() {
  const { isActive, blur } = useSpotlight(" "); // keyboard shortcut combined to ctrlKey

  const exampleRoutes = [
    {
      name: "User",
      path: "/user",
      children: [
        {
          name: "Dashboard",
          path: "/dashboard",
          children: [
            {
              name: "Edit infos",
              path: "/edit",
            },
          ],
        },
      ],
    },
    {
      name: "Home",
      path: "/",
    },
    {
      name: "Infos",
      path: "/infos",
    },
  ];

  return (
    <BrowserRouter>
      <Switch>// Your routes goes here</Switch>
      {isActive && <Spotlight blur={blur} routes={exampleRoutes} />}
    </BrowserRouter>
  );
}

You can navigator with your arrow keys up and down, or directly click on the route you want