How to create Tabs in ReactJs using Hooks ?

#react #customhooks #reacthooks #customtabs

Tabs is very useful functionality for switching between two or more views. But sometimes we need add something custom for match our requirements. In this example, I am gone show you how to create tabs from scratch using react hooks. Follow my steps for achieve your requirements :)

Step 1 : Create a React Application using this command.

npx create-react-app yourprojectname

Step 2 : After executing above command & creating your project folder i.e. yourprojectname, move to project folder using this command.

cd yourprojectname

Step 3 : Start your React application using yarn or npm by following this command.

npm start or yarn start

Let's write down interesting code in App.js file and create our custom tabs using hooks



import React,{useState} from 'react'

const Tab1 = () =>{
  return(
    <div style={{border:'1px solid',margin:'10px',padding:'20px'}}>
      <p>tab1 shows</p>
    </div>
  )
}

const Tab2 = () =>{
  return(
    <div style={{border:'1px solid',margin:'10px',padding:'20px'}}>
      <p>tab2 shows</p>
    </div>
  )
}

export default function App() {

  const [activeTab, setActiveTab] = useState("tab1");

  const handleTab1 = () => {
    setActiveTab("tab1");
  };
  const handleTab2 = () => {
    setActiveTab("tab2");
  };


  return (
    <div className="App">
      <div className="tabs">
      <div className="tab-link" style={{display:'flex'}}>
        <p onClick={handleTab1} 
        className={activeTab === "tab1" ? "active" : ""} 
        style={{cursor:'pointer',padding:'20px',border:'1px solid',margin:'0px 10px'}}
        >
        Tab1
        </p>
        <p 
        onClick={handleTab2} 
        className={activeTab === "tab2" ? "active" : ""} 
        style={{cursor:'pointer',padding:'20px',border:'1px solid',margin:'0px 10px'}}
        >
        Tab2
        </p>
      </div>
      <div className="outlet">
      {activeTab === "tab1" ? <Tab1 /> : <Tab2 />}
      </div>
    </div>
    </div>
  );
}

Output : After saving App.js file, Now open your browser and go to http://localhost:3000, You will the following output