react-glownav-pickupbiz
v0.1.1
Published
React Navigation gives multiple options for Navigation Bar
Downloads
3
Maintainers
Keywords
Readme
Installation
npm i react-glownav-pickupbiz
npm i react-router-dom
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 { GlowNav } from "react-glownav-pickupbiz";
Add below
return (
<BrowserRouter>
<GlowNav links={links} type="modern" />
<Routes>
<Route path="/" element={<Counter />} />
<Route path="/products" element={<ProductsList />} />
<Route path="/bikes" element={<BikeList />} />
</Routes>
</BrowserRouter>
);
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
<GlowNav links={links} />
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/