messonry

A messy grid layout library for React.

Like a masonry layout;
except that it displays media at its intended aspect ratio.

---

Warning

I'd like to release v1.0.0 with full support of Next v13.

Consider the API experimental after messonry@0.2.0.

Using the 'next' branch until stable release. Appreciate your understanding.

---

Table of Contents

• Install
• Usage
• Maintainers
• Contributing
• License

Install with package manager of your choice

pnpm add messonry

yarn add messonry

npm i messonry

Usage

import MessonryGrid from "messonry";


const MyMessyLandingPage = () => {
    const myMediaArray = [
        { src: 'https://url-of-image.com/', mimeType: "image", alt: "description of image" },
        { src: 'https://url-of-video.com/', mimeType: "video", alt: "description of video" },
        { content: <MyCustomComponent /> }
    ]

    const gridOptions = {
      useNextImage={true},
       nextImageConfig: {
        quality: 90,
        priority: true,
        loading: "eager",
        unoptimized: false,
      },
    }

    return (
        <>
            <MessonryGrid items={media} options={gridOptions} />
        </>
    )

}

Maintainers

@nickadamson

Contributing

PRs accepted.

Small note: If editing the README, please conform to the standard-readme specification.

License

MIT © 2022 Nick Adamson