React Tab Component

Description

A simple implementation of Tab-Component for React project

Instructions

First clone this repository.

$ git clone https://github.com/mirsahib/React-Tab-Component.git

Install dependencies. Make sure you already have nodejs & npm installed in your system.

$ yarn install

After successfull installation run

$ yarn run start

Usage

Import React-Tab-Component in your react component.

import TabComponent from "../src/components/TabComponent";

You can pass the following array of object as props to React-Tab-Component

links={[
          { component: TabItem1, name: "TabItem1", path: "/" },
          { component: TabItem2, name: "TabItem2", path: "/tab2" },
          { component: TabItem3, name: "TabItem3", path: "/tab3" },
        ]

Note: You need to create TabItem1,TabItem2,TabItem2 first before importing the React-Tab-Component Example:

import TabItem1 from "./components/TabItem1";
import TabItem2 from "./components/TabItem2";
import TabItem3 from "./components/TabItem3";

Example

<TabComponent
        links={[
          { component: TabItem1, name: "TabItem1", path: "/" },
          { component: TabItem2, name: "TabItem2", path: "/tab2" },
          { component: TabItem3, name: "TabItem3", path: "/tab3" },
        ]}
      />

Props

Name	Type	Mandatory	Description
links	Array	Yes	An array of objects that will be used to pass TabItem Component,Name and Path route