@flownet/react-layout-routered-tabs

This project, @flownet/react-layout-routered-tabs, provides a simple solution for integrating navigable tab components into a React application using React Router. The package leverages Material-UI components for a clean and responsive tabbed interface, allowing users to easily navigate between different views within a web application.

How It Works

The package features a RouterTabs component that manages a series of tabs. Each tab links to a different route defined by the user, and renders its corresponding content seamlessly within the application. The application starts at the first tab if a specific route isn't provided initially. By using the built-in routing capabilities, it offers smooth navigation between the different sections, maintaining state across different views.

Key Features

• Router-Integrated Tabs: Uses react-router-dom to provide tabs that act as navigational links.
• Material-UI Components: Utilizes Material-UI's Paper, Tab, and Tabs components for a consistent and stylish UI.
• Automatic Routing: Automatically redirects to the first tab if the initial route is undefined, ensuring users are always directed to valid content.
• Flexible Tab Configuration: Allows any child component to define its route and display title.

Conclusion

The @flownet/react-layout-routered-tabs package offers a straightforward way to implement tabbed navigation using React Router and Material-UI. It simplifies the development process by integrating routing and UI components, allowing developers to focus on creating engaging content rather than handling navigation intricacies.

@flownet/react-layout-routered-tabs Developer Guide

Overview

The @flownet/react-layout-routered-tabs library simplifies the creation of tabbed navigation within a React application utilizing the React Router. With its focus on ease-of-use, you can implement dynamic and navigable tabs that reflect changes in the URL hash, providing a seamless user experience. Notably, it integrates well with Material-UI components to offer visually appealing interfaces.

Installation

You can install the library using either npm or yarn:

npm install @flownet/react-layout-routered-tabs

or

yarn add @flownet/react-layout-routered-tabs

Usage

Here's how you can incorporate @flownet/react-layout-routered-tabs into your React project:

1. Import the Components: Start by importing the necessary components from the library.
2. Define Your Routes: Use RouterTab to define each tab and its route.
3. Render Tabs: Use RouterTabs to encapsulate the tab navigation and content rendering.

Example

Below is an example to illustrate setting up a basic tabbed interface:

import React from 'react';
import { RouterTabs, RouterTab } from '@flownet/react-layout-routered-tabs';

function App() {
  return (
    <RouterTabs>
      <RouterTab path="/home" title="Home">
        <div>Welcome to the Home Page!</div>
      </RouterTab>
      <RouterTab path="/about" title="About">
        <div>About Us</div>
      </RouterTab>
      <RouterTab path="/contact" title="Contact">
        <div>Contact Information</div>
      </RouterTab>
    </RouterTabs>
  );
}

export default App;

Examples

• Single Page with Tabs:

  import React from 'react';
  import { RouterTabs, RouterTab } from '@flownet/react-layout-routered-tabs';
  
  function Dashboard() {
    return (
      <RouterTabs>
        <RouterTab path="/overview" title="Overview">
          <div>Overview Content</div>
        </RouterTab>
        <RouterTab path="/reports" title="Reports">
          <div>Reports Content</div>
        </RouterTab>
      </RouterTabs>
    );
  }
  
  export default Dashboard;

• Dynamic Tab Navigation:

  // Using the same import as above.
    
  function AdminPanel() {
    return (
      <RouterTabs>
        <RouterTab path="/users" title="Users">
          <div>User management</div>
        </RouterTab>
        <RouterTab path="/settings" title="Settings">
          <div>Settings panel</div>
        </RouterTab>
      </RouterTabs>
    );
  }
  
  export default AdminPanel;

Acknowledgement

This library may internally use Material-UI components for styling, and React Router for managing tabbed navigation. However, you only need to concern yourself with installing @flownet/react-layout-routered-tabs. These dependencies will be handled automatically.

Input Schema

$schema: https://json-schema.org/draft/2020-12/schema
type: object
properties:
  children:
    description: Elements representing individual tabs and their content.
    type: array
    items:
      type: object
      properties:
        props:
          type: object
          properties:
            title:
              description: Title to be displayed on the tab. Defaults to the path if not
                provided.
              type: string
            path:
              description: Path associated with the tab. Used for routing and displaying
                content.
              type: string
              format: uri
          required:
            - path
    minItems: 1
required:
  - children