Skip to content

Commit

Permalink
feat(typescript): Add new type for custom tabs function components (#469
Browse files Browse the repository at this point in the history
)
  • Loading branch information
danez authored Apr 17, 2022
1 parent 4e3eff1 commit f5a877c
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 2 deletions.
6 changes: 4 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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<TabProps> => (
<Tab {...otherProps}>
<h1>{children}</h1>
</Tab>
Expand Down
4 changes: 4 additions & 0 deletions index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand Down

0 comments on commit f5a877c

Please sign in to comment.