Support custom ID generators for elements

README.md

@@ -1,26 +1,29 @@
-# react-tabs [![Build Status](https://travis-ci.org/reactjs/react-tabs.svg?branch=master)](https://travis-ci.org/reactjs/react-tabs)
+#  A fork of [react-tabs](https://github.com/reactjs/react-tabs) which supports server side rendering
 
-React tabs component
+The current version of react tabs cannot be used for server side rendering. Check the issue here - [#56](https://github.com/reactjs/react-tabs/issues/56)
+
+This is a hacky fix to get it working by passing a custom id generation function to the `<Tabs>` component, which does not use a stateful counter to assign ids to the children of `<Tabs>`
+
+It isn't the ideal solution, but till the original authors have a better idea, this seems like the only way to get it working.
 
 > Supports React ^0.14.0 or ^15.0.0
 
 ## Installing
 
 ```bash
-$ npm install react-tabs --save
+$ npm install react-tabs-isomorphic --save
 ```
 
-## Demo
-
-https://reactcommunity.org/react-tabs/example/
-
 ## Example
 
 ```js
 import React, { Component } from 'react';
 import { render } from 'react-dom';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 
+let idCounter = 0;
+const generateIds = () => `custom-id-${idCounter++}`
+
 class App extends Component {
   handleSelect(index, last) {
     console.log('Selected tab: ' + index + ', Last tab: ' + last);
@@ -46,6 +49,7 @@ class App extends Component {
       <Tabs
         onSelect={this.handleSelect}
         selectedIndex={2}
+        generateIdsFn={generateIds}
       >
 
         {/*
@@ -100,14 +104,6 @@ class App extends Component {
 render(<App/>, document.getElementById('container'));
 ```
 
-## Styling
-
-You can disable the default styling by calling this method once:
-
-```
-Tabs.setUseDefaultStyles(false);
-```
-
 ## License
 
 MIT

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "react-tabs",
+  "name": "react-tabs-isomorphic",
   "version": "0.8.2",
-  "description": "React tabs component",
+  "description": "A fork of react tabs, supporting Server side rendering",
   "main": "lib/main.js",
   "scripts": {
     "clean": "rimraf lib",
@@ -18,23 +18,24 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/reactjs/react-tabs.git"
+    "url": "https://github.com/neeharv/react-tabs.git"
   },
-  "author": "Matt Zabriskie",
+  "author": "Neehar Venugopal",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/reactjs/react-tabs/issues"
+    "url": "https://github.com/neeharv/react-tabs/issues"
   },
   "files": [
     "dist",
     "lib"
   ],
-  "homepage": "https://github.com/reactjs/react-tabs",
+  "homepage": "https://github.com/neeharv/react-tabs",
   "keywords": [
     "react",
     "tabs",
     "a11y",
-    "react-component"
+    "react-component",
+	"isomorphic"
   ],
   "peerDependencies": {
     "react": "^0.14.7 || ^15.0.0",

src/components/Tabs.js

@@ -28,6 +28,7 @@ module.exports = React.createClass({
     focus: PropTypes.bool,
     children: childrenPropType,
     forceRenderTabPanel: PropTypes.bool,
+    generateIdsFn: PropTypes.func,
   },
 
   childContextTypes: {
@@ -170,14 +171,15 @@ module.exports = React.createClass({
     const state = this.state;
     const tabIds = this.tabIds = this.tabIds || [];
     const panelIds = this.panelIds = this.panelIds || [];
+    const generateIdsFn = this.props.generateIdsFn ? this.props.generateIdsFn : uuid;
     let diff = this.tabIds.length - this.getTabsCount();
 
     // Add ids if new tabs have been added
     // Don't bother removing ids, just keep them in case they are added again
     // This is more efficient, and keeps the uuid counter under control
     while (diff++ < 0) {
-      tabIds.push(uuid());
-      panelIds.push(uuid());
+      tabIds.push(generateIdsFn());
+      panelIds.push(generateIdsFn());
     }
 
     // Map children to dynamically setup refs
@@ -369,6 +371,7 @@ module.exports = React.createClass({
     delete attributes.forceRenderTabPanel;
     delete attributes.onClick;
     delete attributes.onKeyDown;
+    delete attributes.generateIdsFn;
 
     return (
       <div

src/components/__tests__/Tabs-test.js

@@ -90,7 +90,7 @@ describe('react-tabs', () => {
       expect(tablist.childAt(3).prop('disabled')).toBe(true);
     });
 
-    it('should set ids correctly', () => {
+    it('should set ids correctly using default uuid function', () => {
       const wrapper = mount(createTabs());
       const tablist = wrapper.childAt(0);
 
@@ -102,6 +102,22 @@ describe('react-tabs', () => {
         expect(panel.prop('id')).toBe(tab.prop('panelId'));
       }
     });
+
+    it('should set ids correctly using a id function passed as prop', () => {
+      let idCounter = 1;
+      const customGenerateIdFn = () => `custom-id-${idCounter++}`;
+      const wrapper = mount(createTabs({ generateIdsFn: customGenerateIdFn }));
+      const tablist = wrapper.childAt(0);
+
+      for (let i = 0, l = wrapper.instance().getTabsCount(); i < l; i++) {
+        const tab = tablist.childAt(i);
+        const panel = wrapper.childAt(i + 1);
+
+        expect(tab.prop('id')).toBe(panel.prop('tabId'));
+        expect(panel.prop('id')).toBe(tab.prop('panelId'));
+        expect(tab.prop('id')).toMatch(/^custom-id-[0-9]+$/);
+      }
+    });
   });
 
   describe('interaction', () => {