Made the tab system rely on URL hashes

components/panel-list/index.jsx

@@ -22,9 +22,9 @@ const TabList = React.createClass({
       <div>
         {sections.map((section, index) =>
           <Panel
-            key={`panel-${index}`}
+            key={`panel-${section.id || index}`}
             id={section.id || index}
-            visible={JS ? selectedIndex === index : true}>
+            isVisible={JS ? selectedIndex === index : true}>
               {!JS
                 ? <span>section.title</span>
                 : null}

components/panel/index.jsx

@@ -7,24 +7,24 @@ const Panel = React.createClass({
       React.PropTypes.string,
       React.PropTypes.number
     ]).isRequired,
-    visible: React.PropTypes.bool
+    isVisible: React.PropTypes.bool
   },
 
   getDefaultProps () {
     return {
-      visible: true
+      isVisible: true
     };
   },
 
   render () {
-    const { id, visible, children } = this.props;
+    const { id, isVisible, children } = this.props;
 
     return (
       <div
         role='tabpanel'
         id={`panel-${id}`}
         aria-labelledby={`tab-${id}`}
-        aria-hidden={!visible}>
+        aria-hidden={!isVisible}>
           {children}
       </div>
     );

components/tab-list/index.jsx

@@ -4,7 +4,6 @@ import Tab from '../tab';
 const TabList = React.createClass({
   propTypes: {
     sections: React.PropTypes.array.isRequired,
-    handleClick: React.PropTypes.func.isRequired,
     selectedIndex: React.PropTypes.number
   },
 
@@ -15,17 +14,15 @@ const TabList = React.createClass({
   },
 
   render () {
-    const { sections, handleClick, selectedIndex } = this.props;
+    const { sections, selectedIndex } = this.props;
 
     return (
       <ul role='tablist'>
         {sections.map((section, index) =>
           <Tab
-            key={`tab-${index}`}
-            id={section.id || index}
+            key={`tab-${section.id || index}`}
             selected={selectedIndex === index}
-            handleClick={handleClick}
-            index={index}>
+            id={section.id || index}>
               {section.title}
           </Tab>
         )}

components/tab/index.jsx

@@ -3,34 +3,31 @@ import React from 'react';
 const Tab = React.createClass({
   propTypes: {
     children: React.PropTypes.node.isRequired,
-    handleClick: React.PropTypes.func.isRequired,
-    index: React.PropTypes.number.isRequired,
     id: React.PropTypes.oneOfType([
       React.PropTypes.string,
       React.PropTypes.number
     ]).isRequired,
-    selected: React.PropTypes.bool
+    isSelected: React.PropTypes.bool
   },
 
   getDefaultProps () {
     return {
-      selected: false
+      isSelected: false
     };
   },
 
   render () {
-    const { id, selected, index, handleClick, children } = this.props;
+    const { isSelected, id, children } = this.props;
 
     return (
       <li
-        key={`tab-${id}`}
         id={`tab-${id}`}
         role='tab'
         aria-controls={`panel-${id}`}
-        aria-selected={selected}
-        onClick={() => handleClick(index)}
-        tabIndex={0}>
-        {children}
+        aria-selected={isSelected}>
+          <a href={`#panel-${id}`}>
+            {children}
+          </a>
       </li>
     );
   }

components/tab/index.scss

@@ -6,3 +6,9 @@ li[role='tab'] {
 li[role='tab'][aria-selected='true'] {
   font-weight: bold;
 }
+
+li[role='tab'] > a {
+  text-decoration: none;
+  display: block;
+  color: inherit;
+}

components/tabs/index.jsx

@@ -5,24 +5,54 @@ import TabList from '../tab-list';
 const Tabs = React.createClass({
   propTypes: {
     sections: React.PropTypes.array.isRequired,
-    defaultIndex: React.PropTypes.number
+    initialIndex: React.PropTypes.number
   },
 
   getDefaultProps () {
     return {
-      defaultIndex: 0
+      initialIndex: 0
     };
   },
 
+  targets: new Map(),
+  indexes: new Map(),
+
   getInitialState () {
     return {
       JS: false,
-      selectedIndex: this.props.defaultIndex
+      selectedIndex: this.props.initialIndex
     };
   },
 
   componentDidMount () {
     this.setState({ JS: true });
+
+    // Set up initial hash/index mapping
+    this.props.sections.forEach((section, index) => {
+      this.targets.set(`#panel-${section.id || index}`, index);
+      this.indexes.set(index, `#panel-${section.id || index}`);
+    });
+
+    // Handle hash change
+    window.addEventListener('hashchange', this.handleHash, false);
+
+    // Handle initial index (if no hash already)
+    if (this.props.initialIndex && !window.location.hash) {
+      window.location.hash = this.indexes.get(this.props.initialIndex);
+    }
+
+    // Initial hash handling
+    this.handleHash();
+  },
+
+  componentWillUnmount () {
+    window.removeEventListener('hashchange', this.handleHash, false);
+  },
+
+  handleHash () {
+    if (!window) return;
+
+    this.showSection(this.targets.get(window.location.hash) || 0);
   },
 
   showSection (index) {
@@ -33,7 +63,7 @@ const Tabs = React.createClass({
     return (
       <div>
         {this.state.JS
-          ? <TabList {...this.props} {...this.state} handleClick={this.showSection} />
+          ? <TabList {...this.props} {...this.state} />
           : null}
         <PanelList {...this.props} {...this.state} />
       </div>

example/app.jsx

@@ -11,6 +11,7 @@ const App = React.createClass({
         content: <ExampleContent image='images/1.jpeg' text='This is in tab 1. It is a whole other component! Entire components can be passed down into each tab.' />
       },
       {
+        id: 'foobar',
         title: 'Tab 2',
         content: 'Tab 2 content'
       },