diff --git a/README.md b/README.md index 1bb42a4dbb..0f2c323ef7 100644 --- a/README.md +++ b/README.md @@ -363,16 +363,18 @@ Possible values for tabsRole are: - Tab - TabPanel - TabList +- Tabs #### Pass through properties Note: Because of how react-tabs works internally (it uses cloning to opaquely control various parts of the tab state), you need to pass any incoming props to the component you're wrapping. The easiest way to do this is to use the rest and spread operators, e.g. see `{...otherProps}` below. -```javascript +```tsx import { Tabs, TabList, Tab, TabPanel } from 'react-tabs'; +import type { ReactTabsFunctionComponent, TabProps } from 'react-tabs'; // All custom elements should pass through other props -const CustomTab = ({ children, ...otherProps }) => ( +const CustomTab = ({ children, ...otherProps }): ReactTabsFunctionComponent => (

{children}

diff --git a/index.d.ts b/index.d.ts index fe0344f2a6..43c2618205 100644 --- a/index.d.ts +++ b/index.d.ts @@ -41,6 +41,10 @@ export interface TabPanelProps selectedClassName?: string | undefined; } +export interface ReactTabsFunctionComponent

extends FunctionComponent

{ + tabsRole: 'Tabs' | 'TabList' | 'Tab' | 'TabPanel'; +} + export const Tabs: FunctionComponent; export const TabList: FunctionComponent; export const Tab: FunctionComponent;