diff --git a/README.md b/README.md index c750c2b4fa..4d3256adc6 100644 --- a/README.md +++ b/README.md @@ -102,6 +102,12 @@ Provide a custom class name for disabled tabs. > This option can also be set directly at the `` 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` diff --git a/src/components/Tabs.js b/src/components/Tabs.js index 8a330eb9ad..36eba6820d 100644 --- a/src/components/Tabs.js +++ b/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, diff --git a/src/components/UncontrolledTabs.js b/src/components/UncontrolledTabs.js index 69bc67ca6d..527b95cb2e 100644 --- a/src/components/UncontrolledTabs.js +++ b/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 > diff --git a/src/components/__tests__/Tabs-test.js b/src/components/__tests__/Tabs-test.js index 4a853da5ee..0e8b53cc71 100644 --- a/src/components/__tests__/Tabs-test.js +++ b/src/components/__tests__/Tabs-test.js @@ -90,6 +90,20 @@ describe('', () => { 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', () => {