Typescript support

[saurabhnemade]

Can we have types for this?
It would be nice to have for folks with typescript boilerplate.

[giwiro]

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;
}

[dansmog]

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

[giwiro]

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/**/*"
  ]
}

[JackMcBride98]

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)

[Verrok]

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

[giwiro]

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"
    ],
}

[giwiro]

I sent a PR #72 for this matter.

[chenjiahan]

I sent a PR #72 for this matter.

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