Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React, { createContext, useState, useContext } from "react";
const context = createContext({
activeTabId: "a",
changeTab: (id: string) => {}
});
const Tab = ({ id, children }: any) => {
const tab = useContext(context);
return <div onClick={() => tab.changeTab(id)}>{children}</div>;
};
const TabPanel = ({ whenActive, children }: any) => {
const tab = useContext(context);
return tab.activeTabId === whenActive ? children : null;
};
const TabSwitcher = ({ children }: any) => {
const [activeTabId, setActiveTab] = useState<string>("a");
const changeTab = (newTabId: any) => {
setActiveTab(newTabId);
};
return (
<context.Provider
value={{
activeTabId: activeTabId,
changeTab: changeTab
}}
>
{children}
</context.Provider>
);
};
export default TabSwitcher;
export { Tab, TabPanel };
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.