Skip to content

Commit 033a413

Browse files
authored
Document how to get custom TabPanel working
This is not documented, only learnt about it from #99 (comment) (which also is not easy to find as it is part of a "derailed" issue thread).
1 parent 6f0cf05 commit 033a413

File tree

1 file changed

+14
-0
lines changed

1 file changed

+14
-0
lines changed

README.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -377,6 +377,20 @@ const App = () => (
377377
);
378378
```
379379
380+
This works for custom tabs, but will not suffice for something like a TabPanel. Because of how react-tabs works internally (it uses cloning to opaquely control various parts of the tab state), you need to pass any incoming props to the component you're wrapping. The easiest way to do this is to use the rest and spread operators, e.g.:
381+
382+
``` javascript
383+
const CustomTabPanel = ({ children, myCustomProp, ...otherProps }) => (
384+
<TabPanel {...otherProps}>
385+
<h1>{children}</h1>
386+
{myCustomProp && `myCustomProp: ${myCustomProp}`}
387+
</TabPanel>
388+
)
389+
390+
CustomTabPanel.tabsRole = 'TabPanel'
391+
```
392+
393+
380394
## License
381395
382396
MIT

0 commit comments

Comments
 (0)