eiriklv / react-masonry-component

A React.js component for using @desandro's Masonry
MIT License
1.43k stars 145 forks source link

Add typing for children props #169

Open XcrossD opened 2 years ago

XcrossD commented 2 years ago

Component usage

const Work = () => {
  const childElements = workData.map((elem, index) => {
    return (
      <div className="masonry__brick" data-aos="fade-up" key={index}>
        <div className="item-folio">
          <div className="item-folio__thumb">
              <a href={elem.url} className="thumb-link" title={elem.title}>
                <DynamicImage
                  // fileName={elem.image}
                  fileName="portfolio/lady-shutterbug.jpg"
                  alt={elem.title}
                />
              </a>
          </div>
          <div className="item-folio__text">
            <h3 className="item-folio__title">
              {elem.title}
            </h3>
            <p className="item-folio__cat">
              {elem.category}
            </p>
          </div>
          <a href={elem.url} className="item-folio__project-link" title="Project link">
              <i className="icon-link"></i>
          </a>
          <div className="item-folio__caption">
            <p>{elem.description}</p>
          </div>
        </div>
      </div>
    );
  });

  return (
    <section id="works" className="s-works target-section">
      <div className="row section-header has-bottom-sep narrow target-section" data-aos="fade-up">
        <div className="col-full">
          <h3 className="subhead">Portfolio</h3>
          <h1 className="display-1">
            Check out my recent works.
          </h1>
        </div>
      </div>
      <div className="row masonry-wrap">
        <Masonry
          className={'masonry'} // default ''
          // elementType={'ul'} // default 'div'
          // options={masonryOptions} // default {}
          // disableImagesLoaded={false} // default false
          // updateOnEachImageLoad={false} // default false and works only if disableImagesLoaded is false
          // imagesLoadedOptions={imagesLoadedOptions} // default {}
        >
          {childElements}
        </Masonry>
      </div>
    </section>
  );
};

export default Work;

I encountered the following typescript error

Type '{ children: Element[]; className: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<MasonryPropTypes, any, any>> & Readonly<...>'.
  Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<MasonryPropTypes, any, any>> & Readonly<...>'.ts(2322)

children is indeed not typed in https://github.com/eiriklv/react-masonry-component/blob/master/typings.d.ts#L19 so I created this pull request.

l-hankins commented 10 months ago

@eiriklv Simple adjustment to support React 18