Add Typescript Support

[piyushchauhan]

TS7016: Could not find a declaration file for module 'use-react-screenshot'. '/project/node_modules/.pnpm/use-react-screenshot@3.0.0_html2canvas@1.4.1+react@17.0.2/node_modules/use-react-screenshot/dist/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/use-react-screenshot` if it exists or add a new declaration (.d.ts) file containing `declare module 'use-react-screenshot';`
    16 |   ReactFlowProvider,
    17 | } from 'react-flow-renderer';
  > 18 | import { useScreenshot } from 'use-react-screenshot';
       |                               ^^^^^^^^^^^^^^^^^^^^^^

[shubham-vunet]

Any updates!!

[JVisi]

Can I help with it? I really like the idea and the module, I'd gladly help adding TS support

[osro]

+1

[AshishKapoor]

Quick Fix: Add this to your react-app-env.d.ts file

declare module 'use-react-screenshot' {
  declare
  useScreenshot
  export { useScreenshot }
}

[electroheadfx]

@AshishKapoor where you put this file ? I tried from root app (Next) it doesn't work. Thx

[AshishKapoor]

@AshishKapoor where you put this file ? I tried from root app (Next) it doesn't work. Thx

Try adding it to your next-env.d.ts file at root. +cc @electroheadfx

[trandinhhiep789]

Quick Fix: Add this to your react-app-env.d.ts file

declare module 'use-react-screenshot' {
  declare
  useScreenshot
  export { useScreenshot }
}

Yes, It worked for me

[martsie]

A more detailed type definition to use with return types and hook options.

declare module 'use-react-screenshot' {
  type UseScreenshot = (options: {
    type: 'image/jpeg' | 'image/png'
    quality: number
  }) => [string | null, (ref: HTMLDivElement) => void]
  declare const useScreenshot: UseScreenshot
  export { useScreenshot }
}

[capsuleman]

Hello!

I'm eager to address this issue. I recently started using this great library, and the lack of a type description is a significant problem for projects utilizing Typescript. Here are two options to tackle this issue:

1. Define a static TypeScript interface in the library: this is a quick solution that doesn't involve updating existing files. However, it's incomplete and wouldn't evolve with library updates.

2. Migrate all JavaScript files to TypeScript: It's a bit more involved but ensures consistency even in the future.

@vre2h, I'd like to pursue the second option. Is that acceptable to you? Are there any potential blockers you can think of?

Best regards, Guillaume

[ojonah]

Yes please adding Typescript declarations would be helpful. 🙏🏻