create-react-nav v2.6.5

Create-React-Nav · React Navigation Bar Creator ·

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

Why create-react-nav

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

Limitation of create-react-nav

1. It doesn't have subnavigation system.
2. It doesn't have NEXT.JS support.
3. 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

Styling (optional)

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

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 :

1. You may have to use "!important" keyword for most of the style attributes.
2. 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