add-to-homescreen-react icon indicating copy to clipboard operation
add-to-homescreen-react copied to clipboard

no support for tsx

Open ahmedfadhil opened this issue 3 years ago • 3 comments

how to use this library with cra and tsx? there is no way to import it. It keeps complaining that module not found!

ahmedfadhil avatar Feb 02 '22 10:02 ahmedfadhil

Just create a file ending with .d.ts and write this line in it

declare module '@ideasio/add-to-homescreen-react';

vpachedzhi avatar Aug 31 '22 13:08 vpachedzhi

Doesn't work sadly.

maisoncastro avatar Sep 02 '22 18:09 maisoncastro

I'm late for this but I would suggest to create a new *.d.ts file like global.d.ts at the root src directory (same directory as App.tsx).

Then paste this in the *.d.ts file you just created (I went over the source code and documentations over the types:

declare module '@ideasio/add-to-homescreen-react' {
  interface PlatformPropType {
    showClasses?: string[];
    targetUrl?: string;
    images?: { src?: string; alt?: string }[];
    action?: { ok?: string; cancel?: string; guidanceCancel?: string };
  }
  interface AddToHomeScreenProps {
    appId?: string;
    debug?: boolean;
    activateLogging?: boolean;
    startAutomatically?: boolean;
    skipFirstVisit?: boolean;
    minPageViews?: number;
    startDelay?: number;
    lifespan?: number;
    displayPace?: number;
    mustShowCustomPrompt?: boolean;
    maxDisplayCount?: number;
    validLocation?: RegExp[];
    onInit?: () => void;
    onShow?: () => void;
    onAdd?: () => void;
    onInstall?: () => void;
    onCancel?: () => void;
    showClasses?: string[];
    showClass?: string;
    hideClass?: string;
    customCriteria?: null | (() => void) | boolean;
    customPromptContent?: {
      title?: string;
      src?: string;
      cancelMsg?: string;
      installMsg?: string;
      guidanceCancelMsg?: string;
    };
    customPromptElements?: {
      container?: string;
      containerAddOns?: string;
      banner?: string;
      bannerAddOns?: string;
      logoCell?: string;
      logoCellAddOns?: string;
      logo?: string;
      logoAddOns?: string;
      titleCell?: string;
      titleCellAddOns?: string;
      title?: string;
      titleAddOns?: string;
      cancelButtonCell?: string;
      cancelButtonCellAddOns?: string;
      cancelButton?: string;
      cancelButtonAddOns?: string;
      installButtonCell?: string;
      installButtonCellAddOns?: string;
      installButton?: string;
      installButtonAddOns?: string;
      guidance?: string;
      guidanceAddOns?: string;
      guidanceImageCell?: string;
      guidanceImageCellAddOns?: string;
      guidanceCancelButton?: string;
      guidanceCancelButtonAddOns?: string;
    };
    customPromptPlatformDependencies?: {
      native?: PlatformPropType;
      chromium?: PlatformPropType;
      edge?: PlatformPropType;
      iphone?: PlatformPropType;
      ipad?: PlatformPropType;
      firefox?: PlatformPropType;
      samsung?: PlatformPropType;
      opera?: PlatformPropType;
    };
  }
  declare const AddToHomeScreen: React.FC<AddToHomeScreenProps>;
  export default AddToHomeScreen;
}

Perhaps I should make a PR to include this to NPM so Typescript users would be able to use it too.

HypernovaTX avatar Nov 17 '22 19:11 HypernovaTX