react-side-khashe/README.md

React Navigation gives multiple options for Navigation Bar

![pickupbiz logo](https://pickupbiz.com/static/media/pickupbizzlogo.fbf33cad.jpg)

# Installation

```jsx static
npm i react-simplenav-pickupbiz
npm i react-router-dom
```

# Usage in your app

### Import to App.js

```jsx static
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Counter } from "./components/Counter";
import { ProductsList } from "./components/ProductsList";
import { BikeList } from "./components/BikeList";
import { SimpleNav } from "react-simplenav-pickupbiz";
```

### Add below

```jsx static
return (
  <BrowserRouter>
    <SimpleNav 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

```jsx static
const links = [
  {
    title: "Home",

    url: "/",
  },
  {
    title: "Products",

    url: "/products",
  },
  {
    title: "Bikes",

    url: "/bikes",
  },
];
```

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

```jsx static
<SimpleNav links={links} />
```

### Add below to your header tag of index.html

```jsx static
<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/