<!DOCTYPE html>
React Tabs Component
Building efficient user interfaces in React can be made easier with the use of the Context API. One common UI component that can benefit from this is a Tabs component. In this article, we will learn how to build a Tabs component in React using the Context API.
Creating the Context
First, we need to create a Context to store the active tab state. We can do this by using the createContext method from the React library.
“`jsx
import React, { createContext, useContext, useState } from ‘react’;
const TabsContext = createContext();
const useTabs = () => useContext(TabsContext);
const TabsProvider = ({ children }) => {
const [activeTab, setActiveTab] = useState(0);
return (
{children}
);
};
“`
Building the Tabs Component
Now that we have our Context set up, we can create our Tabs component. This component will render a list of tabs with the active tab highlighted. When a tab is clicked, the active tab state will be updated using the setActiveTab function from the Context.
“`jsx
const Tabs = () => {
const { activeTab, setActiveTab } = useTabs();
const handleTabClick = tab => {
setActiveTab(tab);
};
return (
-
{tabs.map((tab, index) => (
- handleTabClick(index)}>{tab}
))}
);
};
“`
Using the Tabs Component
Finally, we can use our Tabs component within a TabsProvider to manage the active tab state.
“`jsx
const App = () => {
return (
);
};
“`
By using the Context API in React, we can create efficient and reusable UI components like Tabs. The Tabs component described in this article can be easily customized and extended to suit different design requirements.
