spotlight-react
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

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

Package Sidebar

Install

npm i spotlight-react

Weekly Downloads

1

Version

2.0.0

License

ISC

Unpacked Size

12 kB

Total Files

10

Last publish

Collaborators

  • bazeso