Installation

npm i react-navlib-pickupbiz
npm i react-router-dom

How does it work

Usage in your app

Import to App.js

import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Counter } from "./components/Counter";
import { ProductsList } from "./components/ProductsList";
import { BikeList } from "./components/BikeList";
import { NavLib } from "react-navlib-pickupbiz";

Add below

return (
  <BrowserRouter>
    <NavLib links={links} type="modern1" />
    <Routes>
      <Route path="/" element={<Counter />} />
      <Route path="/products" element={<ProductsList />} />
      <Route path="/bikes" element={<BikeList />} />
    </Routes>
  </BrowserRouter>
);

Choose type as below

For side menu navigation

<NavLib links={links} type="side" />

<NavLib links={links} type="sidelogo" />

For Top menu navigation

<NavLib links={links} type="cover" />

<NavLib links={links} type="magic" />

<NavLib links={links} type="black" />

<NavLib links={links} type="formal" />

<NavLib links={links} type="hover" />

Your component follow below steps

Declare the links array

const links = [
  {
    title: "Home",
    icon: "fa fa-home",
    url: "/",
  },
  {
    title: "Products",
    icon: "fa fa-phone-square",
    url: "/products",
  },
  {
    title: "Bikes",
    icon: "fa fa-cogs",
    url: "/bikes",
  },
];

Add the below for Navigation to your component where you want to add it

<NavLib links={links} type="side" />

Add below to your header tag of index.html

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>

Reference

https://levelup.gitconnected.com/publish-react-components-as-an-npm-package-7a671a2fb7f

About Us

https://pickupbiz.com/