Type Declaration

[mrjobosco]

Please, can we have a type declaration for this module?

[chrisbolin]

I'm definitely open to type declarations for the module! I currently don't use typescript, so I'm not the best person to author it. Please feel free to open a PR!

[chrisbolin]

Hey there, Typescript user. I see you adding a 👍to this issue. How about just helping me out with a PR? :D

I'm not currently a TS user, so I'd probably just get it Wrong.

[jsomdev]

Hi Chris,

I have only recently started using the package. And i am totally unfamiliar with contributing on open source projects:
Hopefully this can help you.

declare module "react-detect-offline" {
  export interface PollingConfig {
    url: string;
    enabled: boolean;
    interval: number;
    timeout: number;
  }
  export interface BaseProps {
    onChange?: (online: boolean) => void | undefined;
    wrapperType?: string;
    polling?: boolean | PollingConfig;
  }
  export interface BaseState {
    online: boolean;
  }
  export declare const defaultProps: BaseProps;
  export declare const defaultPollingConfig: PollingConfig;
  export declare const Base: React.ComponentClass<BaseProps, BaseState>;
  export interface DetectorProps extends BaseProps {
    render: ({ online: boolean }) => JSX.Element | null;
  }
  export interface DetectorState extends BaseState {}
  export declare const Detector: React.ComponentClass<
    DetectorProps,
    DetectorState
  >;

  export interface OnlineProps extends BaseProps {}
  export interface OnlineState extends BaseState {}
  export declare const Online: React.ComponentClass<OnlineProps, OnlineState>;
  export interface OfflineProps extends BaseProps {}
  export interface OfflineState extends BaseState {}
  export declare const Offline: React.ComponentClass<
    OfflineProps,
    OfflineState
  >;
}

[JohnRayson]

Just a note to say that although I can't comment on its completeness, the type information suggested by @jsomdev is working, and allows react-detect-offline to work in typescript projects.

[mathieusteele]

Using the type definitions provided by @jsomdev worked for me. I created a folder in my src directory called /types/ and added /react-detect-offline/index.d.ts and pasted the contents of @jsomdev's post. Thanks @chrisbolin for a great package and thank you @jsomdev for sharing your type definitions.

[FlxSaenger]

I do confirm as well that the definition by @jsomdev is working as expected. Big up!

[allanyego]

Another happy soul here @jsomdev, thanks a lot.

[andrewhamili]

Hey fellow Typescript users, how did you use those type declarations? I am also new to the Typescript world and I don't know much about type declarations. I tried to use @jsomdev 's declaration file but I ended up having errors.

From where exactly should I put that file? Or what should I do to make it work?

[andrewhamili]

Okay, I already made it working. I create a folder named react-detect-offline inside @types folder inside node_modules and placed the index.d.ts file. Thanks @jsomdev Your code is working.

[EltonCarreiro]

Hi, the declaration file above throws some errors for those who are using typescript:

An interface declaring no members is equivalent to its supertype @typescript-eslint/no-empty-interface.

To fix that, I've changed a couple of lines, here is the updated declaration:

declare module 'react-detect-offline' {
  export interface PollingConfig {
    url: string;
    enabled: boolean;
    interval: number;
    timeout: number;
  }
  export interface BaseProps {
    onChange?: (online: boolean) => void | undefined;
    wrapperType?: string;
    polling?: boolean | PollingConfig;
  }
  export interface BaseState {
    online: boolean;
  }
  export declare const defaultProps: BaseProps;
  export declare const defaultPollingConfig: PollingConfig;
  export declare const Base: React.ComponentClass<BaseProps, BaseState>;
  export interface DetectorProps extends BaseProps {
    render: ({ online: boolean }) => JSX.Element | null;
  }
  export type DetectorState = BaseState;
  export declare const Detector: React.ComponentClass<DetectorProps, DetectorState>;

  export type OnlineProps = BaseProps;
  export type OnlineState = BaseState;
  export declare const Online: React.ComponentClass<OnlineProps, OnlineState>;
  export type OfflineProps = BaseProps;
  export type OfflineState = BaseState;
  export declare const Offline: React.ComponentClass<OfflineProps, OfflineState>;
}

I've basically removed the empty interfaces and used type DerivedType = BaseType; instead.

[cwise89]

@EltonCarreiro, Thanks for checking out the package! I am actually getting Version 3 out to beta by the end of the month. I'd love to have you try that out as it will be in Typescript with some shiny new Hooks!

[EltonCarreiro]

@cwise89 Sure, I'll be happy check that out! :)

[cwise89]

closing. related to #71 and will be released in V3  :)

[rhythmbhiwani]

Added the type declaration on @types/react-detect-offline