Possibility to add non React-Tabs elements in <Tabs>

[AugustinLF]

I'm looking to add an effect similar to the one used in material-ui tabs, with a div moving from one to the other. This specific example would require me to add an element in the DOM, and React-Tabs throw for that.

Would it be possible to change that? Perhaps adding a specific class to a div if you want to be sure that it's not made by mistake, or exporting another component that can be instanciated in the DOM? What's your take on it? I kind of like the second solution, seems to be cleaner.

I'm willing to submit a PR for that!

[danez]

Sorry for the late reply. Where would you want to add the element?
The question is also, because the tabs are build up with <ul><li> a div cannot be placed everywhere.

[AugustinLF]

No problem, there is no hurry! I indeed didn't pay attention to the DOM elements used, so it will limit the options, but we could do something like that:

<div class="ReactTabs>
  <ul classReactTabs__TabList></ul>
  <div class="ReactTabs__CustomElement"></div>
  <div class="ReactTabs__TabPanel"></div>
</div>

The element would be in the <Tabs></Tabs> component, but not in a <TabList></TabList>.

Here that would solve my problem, since the element would be positionned just after the <ul><li>, and I would have access to things such as the width of the Tabs element.

[danez]

This should be fixed by #123 which was released in 0.8.0.

[alexanderwallin]

For me, #123 is working on succeeding elements, but not preceding ones.

[alexanderwallin]

I opened a PR addressing my issue: #139

[maxcnunes]

I was looking to have a structure like this:

<Tabs>
  <div id="tabs-nav-wrapper">
    <button>Left</button>
    <div className="tabs-container">
      <TabList>...</TabList>
    </div>
    <button>Right</button>
  </div>
  {tabPanels}
</Tabs>

Using the version 0.8.0 it works but I get the error message:

warning.js?8a56:36 Warning: Failed prop type: There should be an equal number of 'Tabs' and 'TabPanels'.Received 0 'Tabs' and 5 'TabPanels'.

[alexanderwallin]

Nice layout, @maxcnunes, although it doesn't cover the case of having elements between <Tab>s.

If I remember correctly, I resolved the error you're seeing here: https://github.com/reactjs/react-tabs/pull/139/files#diff-9f7edeedc285e014eae31af85bb88a27L30

[maxcnunes]

@alexanderwallin I will wait for your PR be merged to test it out. Thanks.

[ccachor]

Whats the status of this PR?

[tazcarper]

Also looking for an update on this PR? @danez

[jaegz]

I too am looking for a similar resolution...

In my case, I'd like to absolutely position an animation component within the Tabs component / over the TabPanels components. Everything functions correctly, however, I do get the following warning:

Warning: Failed prop type: Expected 'TabList' or 'TabPanel' but found 'function Animation() {
_classCallCheck(this, Animation);
return _possibleConstructorReturn(this, (Animation.proto || Object.getPrototypeOf(Animation)).apply(this, arguments));
}'

<Tabs>
  <TabList/>
  <TabPanel/>
  <TabPanel/>
  <TabPanel/>
  <Animation/>
</Tabs>

[alexanderwallin]

@jaegz Do you get that error with the current master or with the PR?

[jaegz]

@alexanderwallin current master - my bad, forgot to mention that.

[alexanderwallin]

Alright! Does the PR solve your issue?

[McPo]

To answer @alexanderwallin, I am using v1.0.0 and have the same layout as @maxcnunes, but am stilling receiving the error (and is in fact broken).

v1.0.0 = Broken/UI not responding + Error
v0.8.0 = selected/active class name not working (even default) + Error

[danez]

The example from above is not supported yet.

[MindRave]

Hello there! Any news on being able to add other elements to the Tabs component? Trying to conditionally display multiple TabPanels throws, as the component won't allow nesting them in a div, for example. #180 should bring the lib one step closer to that, no?

[danez]

If anyone wants to try, I created a PR that should add support for this. #184
Would appreciate if someone can test this :)

[danez]

Released with 1.1.0