Skip to content

nickadamson/messonry

Repository files navigation

messonry

A messy grid layout library for React.

Screenshot of webpage using messonry layout
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 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