react-browser-detection

react-browser-detection copied to clipboard

(17,30): Could not find a declaration file for module 'react-browser-detection'. '/Users/me/app_name/node_modules/react-browser-detection/lib/index.js' implicitly has an 'any' type.
  Try `npm install @types/react-browser-detection` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-browser-detection';`

Hi @shinriyo, yeah, it would be great to add a ts declaration file. Unfortunately 've never used typescript before, so it might take a while, but that's definitely something interesting. If you want to contribute a PR is really appreciated 😄

I would also like to use this with typescript :) Maybe I'll dig into how to create @types for this repo

Hi @RichieRock, awesome 😄 Let us know!

I'm sorry but I ended up using this repo to detect browser: detect-browser. It already had typescript support.

@RichieRock Me too, though, react-browser-detection is react-friendly

We are currently working with the following types:

declare module "react-browser-detection" {
  type BrowserOptions =
    | "chrome"
    | "googlebot"
    | "ie"
    | "edge"
    | "firefox"
    | "opera"
    | "safari"
    | "blink"
    | "unknown"
    | "android-chrome"
    | "android-googlebot"
    | "android-ie"
    | "android-edge"
    | "android-firefox"
    | "android-opera"
    | "android-safari"
    | "android-blink"
    | "unknown"
    | "android"
    | "default";

  export type BrowserDetectionConfig = {
    [K in BrowserOptions]?: (key: K) => React.ReactNode;
  };

  export interface IBrowserDetectionProps {
    /***
     * If true, function contained in children prop will be call only once. If false, it will be called on each render. Default true due to performance reasons
     * @default true
     */
    once?: boolean;
    /***
     * An object containing functions to handle different browsers. Properties would be called like browsers: chrome, firefox, ie, edge, safari, opera, blink, googlebot and default. If specified, the component will use the function under the property with the name of the browser, otherwise, it will use default. Each function take the browser name as parameter and must return a node
     */
    children: BrowserDetectionConfig;
  }

  export default class BrowserDetection extends React.Component<
    IBrowserDetectionProps
  > {}
}