run in ie11 not working

Can you create the typescript definition file upload the node module pack at @types/react-responsive-tabs?

Is there are any specific reason why js-stylesheet is used in this module?
Looks like it's much easier to use standard css file, isn't it?

One of the reasons: at the moment it's impossible to switch-off JSS.

I'm having issues re-rendering a tab's content. Perhaps https://github.com/maslianok/react-responsive-tabs/blob/master/src/components/Tab.js#L8 is blocking my re-rendering from happening.

Example

I have a tab as follows:

tabItems.push({
			key: 2,
			title: "Equipment & Maintenance",
			getContent: () => {
				console.log(this.props.dimensions.width)
				return <DataTable
					rowData={rowData}
					width={this.props.dimensions.width}>
					// table content here 
				</DataTable>
			}
		})

this.props.dimensions.width tracks the width of the table's parent panel. This width of this panel can be re-sized by the user within my app. After they finish resizing the panel, this.props.dimensions.width will be updated with a new value. I need the table rendered within my tab, to re-render using the new width.

How can we change shouldComponentUpdate to support this scenario? I can prove it is an issue with shouldComponentUpdate, as if I switch between tabs and then switch back to this tab, the table re-renders to the correct width.

I encountered this warning while using react-responsive-tabs:

Warning: Tabs has a method called shouldComponentUpdate(). shouldComponentUpdate should not be used when extending React.PureComponent. Please extend React.Component if shouldComponentUpdate is used.

I suppose using Component instead of PureComponent will resolve the issue.

Actual RRT props don't match ones described in API documentation.

        var _item$key = item.key,
            key = _item$key === undefined ? index : _item$key,
            title = item.title,
            content = item.content,
            getContent = item.getContent,
            disabled = item.disabled,
            tabClassName = item.tabClassName,
            panelClassName = item.panelClassName;

Where:

`wrapperClass` - doesn't apply
`tabClass` actually is `tabClassName`
`panelClass` actually is `panelClassName`

Is there a way to configure tabs to be center aligned? Spreading out from the middle?

I am getting the following error:

Exception thrown by hook while handling onSetChildren: Invariant Violation: Expected onMountComponent() to fire for the child before its parent includes it in onSetChildren().

Here is the code:

import React, { Component } from 'react';
import Tabs from 'react-responsive-tabs';

import 'react-responsive-tabs/styles.css';

class WWNG_Sales_MemberTabs extends Component {
    constructor(props) {
        super(props)
        this.state = {
            memberNumber: "",
            items: [],
        }
    }

    componentWillReceiveProps(props) {
        this.setState({ memberNumber: props.memberNumber }, () => {
            this.getItems()
        })
    }

    getItems() {
        var items = []
        items.push({ title: "Usage", getContent: () => "Usage", key: 0, tabClassName: "tab", panelClassName: "panel" })
        items.push({ title: "Transactions", getContent: () => "Transactions", key: 1, tabClassName: "tab", panelClassName: "panel" })
        items.push({ title: "Correspondence", getContent: () => "Correspondence", key: 2, tabClassName: "tab", panelClassName: "panel" })
        items.push({ title: "History", getContent: () => "History", key: 3, tabClassName: "tab", panelClassName: "panel" })
        items.push({ title: "Card Printing", getContent: () => "Card Printing", key: 4, tabClassName: "tab", panelClassName: "panel" })

        this.setState({ items: items })
    }

    render() {
        return (
            <div>
                <Tabs items={this.state.items} />
            </div>
        );
    }
}

export default WWNG_Sales_MemberTabs;

I've installed this component via npm and am seeing some strange behaviour that I don't quite understand.

On running this the first time, the debugger kicked in... which was strange. I've opened up the react-responsive-tabs folder in node_moduels and in lib/index.js, there's numerous console.log statements and even a debugger line.

When viewing the source code here on Github, those lines don't exist.

Did some debugging code accidentally make it on npm?

I thought I was seeing things, so did a rm -rf node_modules && npm install again... and sure enough, those items are still there.

Hi @maslianok,

Could you release the 1.1.0 to NPM so we can install with npm. Thanks.

I've built a custom remove function but I would prefer to use the native allowRemove function. It is rendering the exit button "X" underneath the tab titles.

render() {
return (
<Tabs
allowRemove={true}
items={this.getTabs()}
tabsWrapperClass={"subTabs"}
onChange={this.props.onSubTabChange}
/>
);
}
getTabs = () => {
return this.state.subTabs.map((subTab, index) => ({
title: subTab.name,
getContent: () => subTab.tabContent,
/* Optional parameters */
key: index,
tabClassName: "tab",
panelClassName: "panel"
}));
};

.subTabs {
width: 314px;
margin-right: auto;
margin-left: auto;
display: flex;
}

Thank you in advance!

Is it possible to display a confirm prompt when another tab is clicked before it switches? Like let's say when you have an unsaved work on the page and you would like to prevent tab navigation, so that the user can choose to stay or leave the page.
Or else how can I disable tab navigation? Such that it remains on one tab and the other tabs are disabled.

Hey there, this plugin is extremely nice and well done :)

The only problem I'm having is that when the number of tabs exceeds the width of the panel container, it does not show the "..." for showing more, it just keeps breaking down into multiple rows. I even tried putting your raw example into my project and it still won't show the "..." Any clue what might be the cause? Here are the relevant versions of the modules being used:

"react": "15.0.1",
"react-dom": "15.0.1",

I would really help the community if you would add these to each release. As you know it is hard to keep up to date in the JS world.

Thanks again for a great product!

Hi!

Great effort at making this component however I have a few improvements which would be super additions in my opinion:

-> Have item as a child like so

<Tabs>
	<Item title='item 1'>
		{/* content goes here */}
	</Item>

	<Item title='item 2'>
		{/* content goes here */}
	</Item>
</Tabs>

-> Fix issue for older browsers
I see that you are using flex but this is not widely supported and not so good if you have an application which needs to support older browsers. See caniuse. IE support still required in many cases -_-

Hello, the release of the newest version (1.1.2) seems to have a bug. I get this error after updating:

index.js:65 Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
    at Object.Tabs._this.onResize (index.js:65)
    at invokeFunc (index.js:160)
    at leadingEdge (index.js:170)
    at Object.debounced [as onResize] (index.js:235)
    at ResizeDetector.componentDidMount (ResizeDetector.js:69)
    at eval (ReactCompositeComponent.js:264)
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at eval (ReactCompositeComponent.js:263)
    at CallbackQueue.notifyAll (CallbackQueue.js:76)
    at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80)

Where should the wrapperClass appear in the markup?

I have the following code and the tabClass and panelClass are showing up in the markup but the wrapperClass is not. Anything obvious I am doing wrong?

/*Other component stuff... */

return (
    <div className={componentClass}>
        <Tabs 
          wrapperClass={styles.cp_delveWebpart__tabs} // This doesn't work.
          tabClass={styles.cp_delveWebpart__tabItem} // This works.
          panelClass={styles.cp_delveWebpart__tabContent} // This works.
          items={this.loadTabItems()}
          transformWidth={768}
          showInkBar={true}
         />
    </div>
);

Hi!
Everything is working fine except that tabs are only shown as an accordion. I render Tabs in a modal window - maybe it affects somehow?

my code:

import React from 'react';
import Tabs from 'react-responsive-tabs';

const trfTabs = [{ id: 0, name: 'Смена тарифа', content: '...' }, { id: 1, name: 'Сравнение тарифов', content: '...' }];

function getTabs() {
  return trfTabs.map(tab => ({
    key: tab.id, // - optional
    tabClassName: 'tab', // - optional
    panelClassName: 'panel', // - optional
    title: tab.name,
    transformWidth: 400,
    getContent: () => tab.content,
  }));
}

const ChangeTariffComponent = () => {

  return (
  <div className="change-tariff-wrapper">
    <Tabs items={getTabs()} />
  </div>
  );
};

Is there a way to keep tabs mounted when changing tabs? Similar to the "unmountOnExit" prop in react-bootstrap (https://react-bootstrap.github.io/components/tabs/).

@maslianok Is there a way where we can find the visible tabs and hidden tabs at any point of time?
I mean to ask can we know the list of tabs that are visible and the list of tabs that are under the 'show more' dropdown?

And also if a tab is selected from dropdown list can we show the selected tab name instead of '...' ?

Hi,

I am using form in a tab panel. whenever I use to fill in the form the tab resets to initial state(first tab).
Can you please help to sort out the issue.

Regards,
Owais

Thanks for this excellent plugin.

I'm a bit confused I'm trying to import it in my project and I get this error:

ERROR in ./~/react-responsive-tabs/lib/index.js
Module build failed: ReferenceError: Unknown plugin "transform-class-properties" specified in "/Users/me/Development/sites/project/node_modules/react-responsive-tabs/.babelrc" at 0, attempted to resolve relative to "/Users/me/Development/sites/project/node_modules/react-responsive-tabs"

I'm using node 6.9.0 and the associated npm 3.10.8

Do I need to install babel-plugin-transform-class-properties?

Thanks.

Hi,

transformWidth breakpoint causing inputs to lose focus on keyboard input. When screen size is lower than the transformWidth and tabs are converted to accordion, it is causing the form inputs to lose focus.

Regards,
Ahmed, Btech

In a situation where by I have two tabs on a particular page, I want to be able to reload the page and switch back programmatically to the tab that I was on before.

[email protected]" has incorrect peer dependency "react@^0.14.7 || ^15.1.0".

Warning: You are manually calling a React.PropTypes validation function for the items prop on Tabs. This is deprecated and will not work in production with the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.

Is it possible using the latest version of react function on it?
Thank you!!!

Thank you for this awesome module.

There is no option for changing the show more dots (...) can we change it with the help of icon?

I've tried modified selected tabs using for example

const handleChangeTab = (value) => {
        if (value < 1) {
            setActiveKey(value);
            return true;
        }

        if (value > 0 && isUpdate) {
            console.log('enter: ', true);

            setActiveKey(value);
        } else {
            setActiveKey(0);
        }
        return false;
    };

but still cannot disabled any selected tab.

is there any method to disabled a tab?

For SEO purposes I would like to have all tab content available on the page. That way search engines can index the content.
Browsing through the code this doesn't seem possible right now?

Or am I missing an option?
I was expecting 'content' to always get rendered, while getContent would be rendered only when the tab gets visible?

Hello,

Do you think it would be possible to extract only the components for the navigation tabs? I like this functionality ( the responsiveness ) but I don't use the content/getContent part because I handle it with react router.

If it's extracted as separate package, this package can depend on it and use it, but also it could be used without the panels and content.

P.S. If you like this idea, I could help with the extraction.

Optional parameters are not working, I think I'm doing something wrong, I want to include
"transform width: 500" what do I do?.

const GobalTabs = ({ array }) => { const getTabs = () => { return array.map((content, index) => ({ title: content.title, getContent: () => content.component, transformWidth: 500, key: index, tabClassName: "tab", panelClassName: "panel", })); }; return <Tabs items={getTabs()} />;

As the item is object, so use '===' approach to check the equality will get an incorrect result.

More detail could reference: http://adripofjavascript.com/blog/drips/object-equality-in-javascript.html

Or for here, we could jsut check the title changes or not, since the tab width just related to the title.
Such as:

items.every((item, i) => item.title !== prevProps.items[i].title)

hi guys,

I am trying to render html inside the tab contents. Can you please help?

Regards,
Owais

Steps to reproduce

• go to http://maslianok.github.io/react-responsive-tabs/
• Open the chrome dev tools.
• Change the body font family.

Result:
The inkbar position doesn't match its position and width related to the selected tab after some font update.

Expected result:

The inkbar should match its position and width related to the selected tab.

This could happen in projects that has a different font family set because the function to set the tabs dimensions is triggered before the browser applies the font updates (so the tabs widths are set as if they had the browswer default font family).

I have the following component:

 <Tabs selectedTabKey={selectedTabKey} items={tabItems} />

Where selectedTabKey = 1 and the tabItems array has 2 elements, with keys 1 and 2. When I render the tabs component, no tabs contents are rendered. I have to click either tab 1 or 2 to trigger rendering of content.

This is related to the changes that I've done in my fork. (https://github.com/sanathko/react-responsive-tabs) This was a feature required for our implementation of the tabs in mobile and I think it's a good feature to have. Users will be able to open multiple accordion panels and close any one of the already opened panels.

offsetwidth width is undefined sometimes when reload.

if we use the "showMore" feature and the "InkBar". the tabs inside the showMore don't get higlited properly with the inkbar

react-responsive-tabs looks awesome, so wanted to try it. Lacking a UMD distribution ventured into NPM land. Trying the local demo an it failed at: eslint -c .eslintrc src

thanks.

Hi, Could you please make it compatible with latest.

npm ERR! node v6.9.5
npm ERR! npm v3.10.10
npm ERR! code ETARGET

npm ERR! notarget No compatible version found: react-responsive-tabs@^1.1.1
npm ERR! notarget Valid install targets:
npm ERR! notarget 1.0.1, 0.9.0, 0.8.1, 0.8.0, 0.7.1, 0.7.0, 0.6.2, 0.6.1, 0.5.6,
0.5.5, 0.5.4, 0.5.3, 0.5.2, 0.5.1, 0.5.0, 0.4.9, 0.4.8, 0.4.7, 0.4.6, 0.4.5, 0.
4.4, 0.4.3, 0.4.2, 0.4.1, 0.4.0, 0.3.3, 0.3.2, 0.3.1, 0.3.0, 0.2.1, 0.2.0, 0.1.2
, 0.1.1, 0.1.0
npm ERR! notarget
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'material'
npm ERR! notarget

Seems linked to earlier issue raised Release version 1.1.0 to NPM

When I clone the repo and try to install (at OS X), I am running into issue with one of the eslint plugins.

There's also an error caused by missing babel plugin.

Cannot install and run example because of this.

I am using react-responsive-tabs to display categorized results from a search. As the user types I am re-rendering based on the results. There are times as the number of tabs changes the tabs wrap and do not show the "..." more tab. However if I click on a tab that is not active it fixes itself.

makeTabs = (results) => results.map((item, index) => ({
        title: this.getTitle(item),
        getContent: () => this.getTabContent(item),
        /* Optional parameters */
        key: index,
        tabClassName: "category-tab",
        panelClassName: "panel"
    }))
    
    getTabs = () => {
        const tabData = this.state.groupedResults;
        return (<Tabs selectedTabKey="0" tabsWrapperClass="categorized-results" items={this.makeTabs(tabData)} transform={false}/>);
    }

Then click a tab that isn't active

Also an maybe it should be a separate issue but the selectedTabKey needs to reset to the passed in prop when the number of tabs change.

I'm thinking about porting the ink bar styles from http://www.material-ui.com/#/components/tabs to this component. What do you think?

It might be something that we can enable via a flag.

@maslianok @dcworldwide I still face the same issue even on the latest code. Please help resolve it.
I am using the Tabs Removal example. But still face this issue of tabs wrapping to new line below instead of showing the '...' .

onRemoveTab = (key, evt) => {
    evt.stopPropagation();

    // current tabs
    const { items } = this.state;

    // find index to remove
    const indexToRemove = items.findIndex((tab) => tab.key === key);

    // create a new array without [indexToRemove] item
    const newTabs = [
      ...items.slice(0, indexToRemove),
      ...items.slice(indexToRemove + 1),
    ];

    const nextSelectedIndex = newTabs[indexToRemove]
      ? indexToRemove
      : indexToRemove - 1;

    if (!newTabs[nextSelectedIndex]) {
      alert("You can not delete the last tab!");
      return;
    }

      this.setState({
        items: newTabs,
        selectedTabKey: newTabs[nextSelectedIndex].key,
      });
  };

getTabs = () => {
    return dummyData.map((president, index) => ({
      key: index,
      title: president.name,
      getContent: () => president.biography,
      tabClassName: "tab-wrapper",
      tabClassName: "tab",
      panelClassName: "panel",
    }));
  };

<div className="itemRemoval__wrapper" style={{ marginTop: 120 }}>
        <Tabs
          items={this.state.items}
          selectedTabKey={this.state.selectedTabKey}
          allowRemove
          removeActiveOnly
          onRemove={this.onRemoveTab}
          transform={false}
          showMore={true}
          uid={uniqueId()}
        />
 </div>

What changes need to be done or any workaround for this issue?

I am using react: "^17.0.1"
react-responsive-tabs: "^4.4.0"
react-resize-detector: "^6.6.5"

I am testing on MacBook Chrome browser.

This is a feature request that is mainly for the mobile view of this, when the tabs turn to accordions.

I would like to be able to prepend the tab content (title) with an anchor tag so that I can create jump links from a nav menu. Currently I don't see a way to inject a tag in the tab title to achieve this.

When I open the 'show more' list with tabs and select one of them, I expect the list to hide. Right now, I have to click the 'show more' again, to hide the list.

I was testing case with 30 tabs. Each has a non-trivial content (e.g. component with SVG content, connected to Redux store). Manipulation with content of active tab was very slow, because all 30 components are actually live even when they aren't visible. This makes the usage of these tabs for anything but simple text/image somewhat slow. The (original) 'react-tabs' do not have this behavior.

The current implementation shows an accordion in mobile and when an accordion panel is opened, we have to click another accordion item, to close the previously opened item.
I would like to know if there is a way to click on the already opened accordion panel, to close it (kind of a toggle behavior).

Is there a way to close individual tabs from the UI of the component, similar to closing an individual tab in your browser? The docs don't indicate, but I'm wondering if I'm missing it.