dynamic-react-navlinks

React Dynamic NavLinks

This package allows you to render dynamic NavLinks and a basic navbar from the Routes within a react-router-dom BrowserRouter component.

It will render the proper navigation link based on the path in the given route's props. Link text is generated from the path as well, but can be customized.

Usage

In your entrypoint:

Import the DynamicNavbar Component

import DynamicNavbar from "dynamic-react-navlinks"

Wrap your Routes within the DynamicNavbar HOC (Higher Order Component)

...

const rootElement = document.getElementById("root");
ReactDOM.render(
  <BrowserRouter>
        <DynamicNavbar>
          <Route exact path="/" component={App} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </DynamicNavbar>
  </BrowserRouter>,
  rootElement
);

DynamicNavbar returns a navbar in its own div tag. The div has a className of "react-dynamic-navbar", and returns with NavLinks to each route. The routes returned will be as children to the React Router Dom Switch component. This package will exclude any routes with url params

This Route will be available for navigation, however the DynamicNavbar component will not create a link for it.

Note: It will not render links for nested Routes

Styles

The DynamicNavbar and NavLinks render with a default style object. These styles can be kept, or they can be overwritten using props (listed below in the "Props" section). The default styles are:

Navbar:

defaultWrapperStyles = {
    display: "flex",
    justifyContent: "space-around",
    width: "100vw",
    alignItems: "center",
    height: "70px",
    marginBottom: "35px"
  };

NavLinks:

defaultLinkStyles = {
    textDecoration: "none",
    width: "100px",
    fontSize: "2rem",
    fontWeight: "500"
  };

Note on Styles: Styles are all inline.

Props

1. DynamicNavbar

• These Props directly relate to the Navbar layout.

• navbarStyles

• Use the navbarStyles prop to overwrite the defaults. Pass in an object with standard JSX syntax styles.

  <DynamicNavbar navbarStyles={{ backgroundColor: 'black' }} />

1. Route Component

• Route Component Props have effect on the NavLinks that are returned in your dynamic navbar.

• linkText Prop (optional):

• Pass linkText prop to use a custom link name instead of the auto generated text (this defaults to a formatted version of the path).

  Returns "Blog-detail" as the link.

• The above code would create a default NavLink of 'Blog-detail'. Passing in the "linkText" prop allows you to define what text to use for that particular link.

  Returns "blog" as the link.

• If no linkText prop is passed for a Route with "/" as its path, the link will default to "Home" Ex:

  Returns "Home" as the link.

• linkStyles Prop (optional):

• Pass the linkStyles prop to the Route component with an object of JSX styles.

  <Route exact path="/" linkStyles={{ fontSize: "3rem", color: "white"}} component={Home} />

• This will overwrite the default linkStyles given by the HOC.

Props built in to the Route component are still fully available.

activeClass Prop (optional):

• The activeClass prop works with react-router-dom's NavLink activeClassName prop.
• By default, NavLinks come with the "active" className when active.
• Passing the activeClass prop allows you to define a custom name.

  Appends "active-home-link" to the element's class list when active, instead of "active" Output =>

Note: NavLinks here are returned with a className of "dynamic-nav-link". The activeClass appends to that class list: "dynamic-nav-link active".

To make new links, simply add a new Route component to your Router.

Standard BrowserRouter functionality is persisted. Route guards, render props, etc work the same as normal.

Thanks for using React Dynamic Navlinks!