reactjs / react-tabs

An accessible and easy tab component for ReactJS.
https://reactcommunity.org/react-tabs/
MIT License
3.1k stars 447 forks source link

Property 'tabsRole' is missing in type 'ReactElement<any, any>' but required in type 'ReactTabsFunctionComponent<TabProps> #471

Closed atissedredecathlon closed 2 years ago

atissedredecathlon commented 2 years ago

Hey,

I'm trying to create a custom component, on the last version (5.1.0). Reproducing the .readme example gives me the following error :

Property 'tabsRole' is missing in type 'ReactElement<any, any>' but required in type 'ReactTabsFunctionComponent<TabProps>'.ts(27

Here is the basic reproduction : https://codesandbox.io/s/react-typescript-forked-foodu8?file=/src/App.tsx

Am I missing something ?

danez commented 2 years ago

Thanks for reporting this. The example is indeed wrong. Here is the diff what it should be

import "./styles.css";
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 = ({
+const CustomTab: ReactTabsFunctionComponent<TabProps> = ({
  children,
  ...otherProps
-}): ReactTabsFunctionComponent<TabProps> => (
+}) => (
  <Tab {...otherProps}>
    <h1>{children}</h1>
  </Tab>
);

CustomTab.tabsRole = "Tab"; // Required field to use your custom Tab

...

I will update the example in the readme.

Thanks again.