From 51b30bbe5adffa29eaba99a50eb43f3b413afade Mon Sep 17 00:00:00 2001
From: Daniel Tschinder <231804+danez@users.noreply.github.com>
Date: Sun, 17 Apr 2022 18:08:59 +0200
Subject: [PATCH] feat(typescript): Add new type for custom tabs function
 components (#469)

---
 README.md  | 6 ++++--
 index.d.ts | 4 ++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 701b012360..b6318af80b 100644
--- a/README.md
+++ b/README.md
@@ -374,16 +374,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<TabProps> => (
   <Tab {...otherProps}>
     <h1>{children}</h1>
   </Tab>
diff --git a/index.d.ts b/index.d.ts
index ab0bc42921..4ffb9ff1f1 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -41,6 +41,10 @@ export interface TabPanelProps
   selectedClassName?: string | undefined;
 }
 
+export interface ReactTabsFunctionComponent<P = {}> extends FunctionComponent<P> {
+  tabsRole: 'Tabs' | 'TabList' | 'Tab' | 'TabPanel';
+}
+
 export const Tabs: FunctionComponent<TabsProps>;
 export const TabList: FunctionComponent<TabListProps>;
 export const Tab: FunctionComponent<TabProps>;