Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upGitHub is where the world builds software
Millions of developers and companies build, ship, and maintain their software on GitHub — the largest and most advanced development platform in the world.
Support mountOnEnter in Tab component #1552
Comments
|
To add some context: This supports a use case I have where some responsive visualizations use the width of their container to lay out their content. If the tab content mounts before the tab is selected (when it is hidden), the width is calculated to be zero and the visualization doesn't re-render when the tab is focused, so the tab content area appears blank (its child is a component 0px wide). |
|
I would love this feature as well. I have API calls that I do not want to run until the new tab is selected. |
|
Sure, this can be an optional prop, when For now the workaround is to control mounting yourself similar to: import React, { useState } from 'react';
import { TabContent, TabPane, Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col } from 'reactstrap';
import classnames from 'classnames';
const Example = (props) => {
const [activeTab, setActiveTab] = useState('1');
const toggle = tab => {
if(activeTab !== tab) setActiveTab(tab);
}
return (
<div>
<Nav tabs>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => { toggle('1'); }}
>
Tab1
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => { toggle('2'); }}
>
Moar Tabs
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
{activeTab === '1' && <Row>
<Col sm="12">
<h4>Tab 1 Contents</h4>
</Col>
</Row>}
</TabPane>
<TabPane tabId="2">
{activeTab === '2' && <Row>
<Col sm="6">
<Card body>
<CardTitle>Special Title Treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
<Button>Go somewhere</Button>
</Card>
</Col>
<Col sm="6">
<Card body>
<CardTitle>Special Title Treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
<Button>Go somewhere</Button>
</Card>
</Col>
</Row>}
</TabPane>
</TabContent>
</div>
);
}
export default Example; |
|
I think that your workaround isn't right because this would activate the "componentDidMount" life cycle as long as the activeTab is equal to the index. |
|
@jomarquez21 isn't that what this issue is asking for? Have the component mount and thus "activate" the |
Does TabPane support mountOnEnter props. If not support can you add this feature?