reactjs / react-tabs

An accessible and easy tab component for ReactJS.

Home Page:https://reactcommunity.org/react-tabs/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

atissedredecathlon opened this issue · comments

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 ?

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.