question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Tabs] Ability to set TabContext value from children

See original GitHub issue
  • I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Hey, it would be great to be able to switch tabs from within the tab content. Currently I have to drill props down to be able to access React state variable that stores active tab.

Examples 🌈

import TabContext, { useTabContext } from "@material-ui/lab/TabContext";

// ...

const [activeTab, setActiveTab] = useTabContext();

Motivation 🔦

Right now to achieve that I have to drill props or wrap tabs with my custom context provider that can do similar thing.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
oliviertassinaricommented, Aug 2, 2020

@lukejagodzinski Let’s hold on to this feature request, we will reconsider if we get more requests 😃

1reaction
eps1loncommented, Jul 27, 2020

I think this is better suited as a userland implementation. You could just as well expose setActiveTab via context and read from that. Otherwise it gets really tricky to reason about what is controlling the value.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to make my custom tab component work with passing ...
Provider value={{ activeTab, setActiveTab }}> {children} </TabContext.Provider> ); }; const Tab = props => { const { activeTab, ...
Read more >
React MUI TabContext API - GeeksforGeeks
children (node): It is a component similar to the table row. value(string): The currently selected tab index value.
Read more >
[Tabs] Improve tab panels mounting behavior #21250 - GitHub
Based on #21241, we might have an opportunity to improve the ... throw new TypeError('No TabContext provided') } const tabId = context.value ......
Read more >
TabContext API - Material UI - MUI
API reference docs for the React TabContext component. Learn about the props, CSS, ... The value of the currently selected Tab . children,...
Read more >
Compound Components with React Context API - LinkedIn
Similarly we need to set up TabDetail component to share selectedDetailvalue. Now we can use our compound component in its full capacity. <Tabs> ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found