create-react-nav

Create-React-Nav · React Navigation Bar Creator ·

Create your react app menu bar more easily with create-react-nav

Why create-react-nav

• You don't need extra dependencies like react-router-dom.
• You don't need to write extra code.
• Getting more comfort with the navigation system
• Super easy to maintain.

Limitation of create-react-nav

• It doesn't have subnavigation system.
• It doesn't have NEXT.JS support.
• It doesn't have Gatsby support.

example:

Installation

Use the package manager npm to install create-react-nav.

npm install create-react-nav

Usages

Step-1 (Import the Library)

import Navbar from "create-react-nav";

Step-2 (Use the Component)

const links = [
  [ "...ROUTER_PATH..." , "...PAGE_NAME..." , ...COMPONENT_NAME... ],
  [ "...ROUTER_PATH..." , "...PAGE_NAME..." , ...COMPONENT_NAME... ]
];

<Navbar routes={links}/>

Note : Leave the PAGE_NAME empty not to add the route to navbar

Basic Configuration (optional)

Add Trigger Icon

This is the button which works as a trigger to open hidden navigation bar when you are using mobile or smaller devices.

<Navbar triggerIcon="light" routes={links} />

Some integrated Trigger Icon

• dark
• light

Note : You Can Use Your Own Custom Icon By Adding The Source

Add Logo Image

This is your app logo which will appear on the top of the navigation bar

<Navbar logoImg="...SOURCE_PATH_OF_YOUR_LOGO..." routes={links} />

Add Text Logo

This is your app name which will appear on the top of the navigation bar

<Navbar logoTxt="...USE_ANY_TEXT_AS_LOGO..." routes={links} />

Api

Api	Type	Description
routes	Array of multiple Arrays	Required three properties first one is the route path, second one is the title for the page and third one is the component
triggerIcon	String	trigger icon for the navigaton bar (mobile device)
logoImg	String	Source link of your logo
logoTxt	String	Text logo which basically refers your website name
yToggle	String	boolean as string to toggle the nav by y axis

Styling (optional)

Class Names to customize or over write the styles given from create-react-nav.

Class Name	Description
.Navbar	Style of the navigation bar
.Appbar	Style of the app bar in mobile mode
a.NavItems	Style of all the links (Don't need to use '!important')
a.selected	Style Of the active navigation link (Don't need to use '!important')
.Appbar span	Style of Text logo
.selected::after	Style of active page indicator (For Desktop mode)
.NavItems::after	Style of all page indicator

How does active class workes in create-react-nav?

Basically the ".NavItems::after" has 0% of width. When you click on a Nav we add "selected" class and then it's got 100% width and you see the indicator is apearing.

Note :

• You may have to use "!important" keyword for most of the style attributes.
• To change the style for mobile screen use max-width to 700px.

Example (CSS)

.Navbar {
  background-color: white !important;
}

.NavItems::after {
  background-color: red !important;
}

@media only screen and (max-width: 700px) {
  .selected {
    color: white !important;
    background-color: red !important;
  }
}

Get access of react-router-dom

create-react-nav

import { navigation } from "create-react-nav";
const history = navigation.useHistory()

react-router-dom

import { useHistory } from "react-router-dom";
const history = useHistory()

Example (JSX)

import React from "react";
import Home from "./files/home";
import About from "./files/about";
import Navbar from "create-react-nav";

const App = () => {
  const links = [
    ["/", "Home", Home],
    ["/about", "About", About],
  ];

  return <Navbar logoTxt="hello" yToggle="true" routes={links} />;
};

export default App;

Note : Place the Navbar component where you want to do page routing.

License

MIT