react-responsive-masonry icon indicating copy to clipboard operation
react-responsive-masonry copied to clipboard

Create .d.ts files for TypeScript

Open metalmatze opened this issue 4 years ago • 5 comments

Hey,

thanks for the project! :100: Sadly my CI currently fails as it expects the types declared.

Try `npm i --save-dev @types/react-responsive-masonry` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-responsive-masonry';`

Now, I have never done this and would try to do it, however, if it an easy task for you I'd appreciate the help. Let me know!

metalmatze avatar Jan 11 '21 17:01 metalmatze

As a quick fix, you can create a declarations.d.ts file at the root of the project and write declare module 'react-responsive-masonry'; inside this file

It should silence the error.

abumalick avatar Jan 25 '21 22:01 abumalick

Here is a minimalist declaration.d.ts file

declare module 'react-responsive-masonry' {
  import * as React from 'react';

  const Masonry: React.FC<{
    columnsCount?: number
    gutter?: string
  }>

  export const ResponsiveMasonry: React.FC<{
    columnsCountBreakPoints?: Record<number, number>
  }>

  export default Masonry
}

popzelife avatar Mar 08 '21 15:03 popzelife

Put it inside the 'src' folder if you're using React

CodeAunt avatar May 18 '22 08:05 CodeAunt

In addition to @popzelife's declaration file, you can add additional props to support styling:

import React, { CSSProperties } from 'react'

const Masonry: React.FC<{
  columnsCount?: number
  gutter?: string
  className?: string
  style?: CSSProperties
}>

export const ResponsiveMasonry: React.FC<{
  columnsCountBreakPoints?: Record<number, number>
  className?: string
  style?: CSSProperties
}>

bruxr avatar Feb 03 '23 03:02 bruxr

We can leverage @types/react-responsive-masonry, now.

Using yarn: yarn add -D @types/react-responsive-masonry

stevemeisner avatar Dec 30 '23 20:12 stevemeisner