Typescript support about rodal HOT 8 OPEN

I don't know if it helps but I made one for my project and it works for me.

declare module 'rodal' {
  import {MouseEventHandler, ReactNode} from 'react';

  type RodalProps = {
    children?: ReactNode;
    width?: number;
    height?: number;
    measure?: string;
    visible?: boolean;
    showMask?: boolean;
    closeOnEsc?: boolean;
    closeMaskOnClick?: boolean;
    showCloseButton?: boolean;
    animation?: string;
    enterAnimation?: string;
    leaveAnimation?: string;
    duration?: number;
    className?: string;
    customStyles?: {[key: string]: any};
    customMaskStyles?: {[key: string]: any};
    onClose?: MouseEventHandler<HTMLSpanElement>;
    onAnimationEnd?: () => never;
  };

  const Rodal = (_: RodalProps): JSX.Element => {};
  export = Rodal;
}

from rodal.

I sent a PR #72 for this matter.

Thanks for you contribution! This change has been released in v2.1.0

from rodal.

How do you make use of this? where do you save it?

from rodal.

How do you make use of this? where do you save it?

In order to use custom types you will need to import it through typescript. To do so, add the path to your custom types into the tsconfig.json.
For example if I got the following folder structure (included the custom-types folder):

project/
├── src/
├── custom-types/
    ├── rodal/
    │     └── index.d.ts.        <-- this is where the "decla module 'rodal'" file should be saved
    └── some-other-module/
          └── index.d.ts

In order to add the folder into typescript is adding it to the include key.

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src",
    "custom-types/**/*"
  ]
}

from rodal.

Make a PR for this :) it helped me out a lot. Although my linter did not like the return type (so I just ignored it for that line)

from rodal.

declare module 'rodal' {
  import {MouseEventHandler, ReactNode} from 'react';

  type RodalProps = {
    children?: ReactNode;
    width?: number;
    height?: number;
    measure?: string;
    visible?: boolean;
    showMask?: boolean;
    closeOnEsc?: boolean;
    closeMaskOnClick?: boolean;
    showCloseButton?: boolean;
    animation?: string;
    enterAnimation?: string;
    leaveAnimation?: string;
    duration?: number;
    className?: string;
    customStyles?: {[key: string]: any};
    customMaskStyles?: {[key: string]: any};
    onClose?: MouseEventHandler<HTMLSpanElement>;
    onAnimationEnd?: () => never;
  };

  const Rodal = (_: RodalProps): JSX.Element => {};
  export = Rodal;
}

thanks a lot

from rodal.

Now that I'm using nextjs I changed it a little bit:

declare module 'rodal' {
  import {MouseEventHandler, JSX, PropsWithChildren} from 'react';

  type RodalProps = PropsWithChildren & {
    width?: number;
    height?: number;
    measure?: string;
    visible?: boolean;
    showMask?: boolean;
    closeOnEsc?: boolean;
    closeMaskOnClick?: boolean;
    showCloseButton?: boolean;
    animation?: string;
    enterAnimation?: string;
    leaveAnimation?: string;
    duration?: number;
    className?: string;
    customStyles?: Record<string, any>;
    customMaskStyles?: Record<string, any>;
    onClose?: MouseEventHandler<HTMLSpanElement>;
    onAnimationEnd?: () => never;
  };

  function Rodal(_: RodalProps): JSX.Element;
  export = Rodal;
}

and in the tsconfig.json:

{
  "compilerOptions": {
    "typeRoots": [
      "custom-types",
      "node_modules/@types"
    ],
}

from rodal.

I sent a PR #72 for this matter.

from rodal.