React The Routing Library

A React library for managing routes and navigation with authentication and customizable navigation bars.

Installation

Install the library using npm:

npm install react-the-routing-library

Features

• Based on react-router-dom: You can use react-router-dom navigation to move through routes.
• Navbar Component: A customizable navigation bar.
• RenderRoutes Component: Simplifies route rendering with authentication handling.
• RouteNeedAuthState Enum: Defines route authentication states.
• AppRoute Interface: TypeScript interface for defining routes.

Usage

1. Importing Components

import React from "react";
import {
  Navbar,
  RenderRoutes,
  AppRoute,
  RouteNeedAuthState,
} from "react-the-routing-library";

2. Define Routes

Define your application routes using the AppRoute interface:

const routes: AppRoute[] = [
  {
    path: "/",
    name: "Home",
    showInNavbar: true,
    element: <div>Home Page</div>,
    needAuth: RouteNeedAuthState.OPEN,
  },
  {
    path: "/protected",
    name: "Protected",
    showInNavbar: true,
    element: <div>Protected Page</div>,
    needAuth: RouteNeedAuthState.NEED_AUTH,
  },
];

3. Render the Navbar

Use the Navbar component to display a navigation bar:

<Navbar
  routes={routes}
  primaryColor="#1d4ed8"
  hoverBgColor="#bfdbfe"
  backgroundColor="#ffffff"
/>

For NavBar styles to work properly add to index.css:

@import 'react-the-routing-library/dist/index.css';

4. Render Routes

Use the RenderRoutes component to render your routes:

<RenderRoutes routeList={routes} />

5. Combine Navbar and Routes

Integrate the Navbar and RenderRoutes components in your app:

const App = () => {
  return (
    <div>
      <RenderRoutes routeList={routes}>
        <Navbar
        routes={routes}
        primaryColor="#1d4ed8"
        hoverBgColor="#bfdbfe"
        backgroundColor="#ffffff"
      />
      </RenderRoutes>
    </div>
  );
};

export default App;

Customization

Navbar Props

• routes: An array of AppRoute objects defining the navigation items.
• primaryColor: The primary color for the navigation bar.
• hoverBgColor: The background color for hover states.
• backgroundColor: The background color of the navigation bar.

Route Authentication

Use the RouteNeedAuthState enum to define authentication requirements for routes:

• NEED_AUTH: Requires authentication.
• NEED_LOGOUT: Requires the user to be logged out.
• OPEN: No authentication required.

License

This library is licensed under the ISC License. See the LICENSE file for details.