Giter VIP home page Giter VIP logo

Comments (2)

danez avatar danez commented on July 20, 2024 1

I just release 4.3.0 that includes the typescript typings. Let me know if that helps.

from react-tabs.

sergei-maertens avatar sergei-maertens commented on July 20, 2024

Looks like the @types/react-tabs package at v5 does not include the types at all anymore - I've resolved this by installing an older version: npm i --save-dev @types/react-tabs@^2.3.4 and extending the interface where required.

edit: this didn't solve it because it was for a much older version. Instead, I added the types in my own codebase based on the master branch:

/**
 * Type declarations for react-tabs are added since v5.0, but that requires React 18+.
 *
 * Types taken from https://github.com/reactjs/react-tabs/blob/main/index.d.ts
 *
 * This can be removed as soon as we use react-tabs 5.0+
 */
declare module 'react-tabs' {
  import {FunctionComponent, HTMLProps} from 'react';

  export interface TabsProps
    extends Omit<HTMLProps<HTMLDivElement>, 'className' | 'onSelect' | 'ref'> {
    className?: string | string[] | {[name: string]: boolean} | undefined;
    defaultFocus?: boolean | undefined;
    defaultIndex?: number | undefined;
    direction?: 'rtl' | 'ltr' | undefined;
    disabledTabClassName?: string | undefined;
    disableUpDownKeys?: boolean | undefined;
    disableLeftRightKeys?: boolean | undefined;
    domRef?: ((node?: HTMLElement) => void) | undefined;
    environment?: Window | undefined;
    focusTabOnClick?: boolean | undefined;
    forceRenderTabPanel?: boolean | undefined;
    onSelect?: ((index: number, last: number, event: Event) => boolean | void) | undefined;
    selectedIndex?: number | undefined;
    selectedTabClassName?: string | undefined;
    selectedTabPanelClassName?: string | undefined;
  }

  export interface TabListProps extends Omit<HTMLProps<HTMLUListElement>, 'className'> {
    className?: string | string[] | {[name: string]: boolean} | undefined;
  }

  export interface TabProps extends Omit<HTMLProps<HTMLLIElement>, 'className' | 'tabIndex'> {
    className?: string | string[] | {[name: string]: boolean} | undefined;
    disabled?: boolean | undefined;
    disabledClassName?: string | undefined;
    selectedClassName?: string | undefined;
    tabIndex?: string | undefined;
  }

  export interface TabPanelProps extends Omit<HTMLProps<HTMLDivElement>, 'className'> {
    className?: string | string[] | {[name: string]: boolean} | undefined;
    forceRender?: boolean | undefined;
    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>;
  export const TabPanel: FunctionComponent<TabPanelProps>;
}

from react-tabs.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.