feat(Tabs): Add domRef prop for getting the ref to the tabs DOM node (#213)

Author: danez

README.md

@@ -102,6 +102,12 @@ Provide a custom class name for disabled tabs.
 
 > This option can also be set directly at the `<Tab />` component.
 
+#### domRef: `(node: ?HTMLElement) => void`
+
+> default: `null`
+
+Register a callback that will receive the underlying DOM node for every mount. It will also receive null on unmount.
+
 #### forceRenderTabPanel: `boolean`
 
 > default: `false`

src/components/Tabs.js

@@ -18,6 +18,7 @@ export default class Tabs extends Component {
     defaultFocus: PropTypes.bool,
     defaultIndex: PropTypes.number,
     disabledTabClassName: PropTypes.string,
+    domRef: PropTypes.func,
     forceRenderTabPanel: PropTypes.bool,
     onSelect: onSelectPropType,
     selectedIndex: selectedIndexPropType,

src/components/UncontrolledTabs.js

@@ -41,6 +41,7 @@ export default class UncontrolledTabs extends Component {
     children: childrenPropType,
     className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
     disabledTabClassName: PropTypes.string,
+    domRef: PropTypes.func,
     focus: PropTypes.bool,
     forceRenderTabPanel: PropTypes.bool,
     onSelect: PropTypes.func.isRequired,
@@ -283,6 +284,7 @@ export default class UncontrolledTabs extends Component {
       children, // unused
       className,
       disabledTabClassName, // unused
+      domRef,
       focus, // unused
       forceRenderTabPanel, // unused
       onSelect, // unused
@@ -300,6 +302,7 @@ export default class UncontrolledTabs extends Component {
         onKeyDown={this.handleKeyDown}
         ref={node => {
           this.node = node;
+          if (domRef) domRef(node);
         }}
         data-tabs
       >

src/components/__tests__/Tabs-test.js

@@ -90,6 +90,20 @@ describe('<Tabs />', () => {
     test('should accept className', () => {
       expectToMatchSnapshot(createTabs({ className: 'foobar' }));
     });
+
+    test('should accept domRef', () => {
+      let domNode;
+      mount(
+        createTabs({
+          domRef: node => {
+            domNode = node;
+          },
+        }),
+      );
+
+      expect(domNode).not.toBeUndefined();
+      expect(domNode.className).toBe('react-tabs');
+    });
   });
 
   describe('child props', () => {