From 20a4ba09c44de65f4cc4e9d5a7512929550b89bf Mon Sep 17 00:00:00 2001
From: Daniel Tschinder <231804+danez@users.noreply.github.com>
Date: Sun, 17 Apr 2022 17:14:35 +0200
Subject: [PATCH 1/2] feat(typescript): Add new type for custom tabs function
components
---
index.d.ts | 4 ++++
1 file changed, 4 insertions(+)
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;
From 1c0fe126a223bdf7c06df7f083af96c9f3150c30 Mon Sep 17 00:00:00 2001
From: Daniel Tschinder <231804+danez@users.noreply.github.com>
Date: Sun, 17 Apr 2022 17:23:38 +0200
Subject: [PATCH 2/2] Update README.md
---
README.md | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
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}