react-tab-peiss

0. image

1.you can install to type to terminal.

  npm i react-tab-peiss
  npm start

2.just import this top of your code.

  import ReactTab from "react-tab-peiss"

3.and then you can use like this

    <ReactTab
      tabs={["aa","bb","cc","dd"]}
      tabWidth={"200px"}
      tabHeight={"40px"}
      firstShowTab={"bb"}
      clickTabColor={"#dedede"}
      nonClickTabColor={"#efefef"}
      onClickTab={(clickEl)=>handleClick(clickEl)}
    />

3-1.real code sample

  import React, { useState } from 'react'
  import ReactTab from "react-tab-peiss"
  const TabTest = () => {
    const [tab,setTab] = useState("")
    return (
      <div 
      style={{padding:"40px"}}>
      <ReactTab
        tabs={["aa","bb","cc","dd"]}
        tabWidth={"200px"}
        tabHeight={"40px"}
        firstShowTab={"aa"}
        clickTabColor={"#dedede"}
        nonClickTabColor={"#efefef"}
        onClickTab={(clickEl)=>setTab(clickEl)}
      />
      <div style={{width:"800px",height:"400px",backgroundColor:"#dedede",
        display:"flex",justifyContent:"center",alignItems:"center"}}>
        {tab ==="aa"?
          "aa":
          tab ==="bb"?
          "bb":
          "etc"  
        }
      </div>
      </div>
    )
  }

  export default TabTest

4. this is thte param description

  tabs: insert your tabs which type is array
  tabWidth: set the width length in this param
  tabHeight: set the Height length in this param
  firstShowTab: set the tab name with string type to show the first site
  clickTabColor: set the color which is clicked
  nonClickTabColor: set the color which are not clicked 
  onClickTab: you can set the event when you click the tab and catch the param inside