react-xmasonry

Simple, minimalistic and featured native masonry layout for React JS.

General Features

• React JS native masonry layout implementation with no dependencies.
• Minimalistic design and simple use case.
• Ability to control blocks width (in columns) and column width.
• Responsive, mobile-friendly approach (so there is no "fixed block width" option).
• Fully customizable: use CSS animations and transitions you wish (use .xmasonry and .xblock selectors).

Visit the demo page for more details.

Installation

npm install react-xmasonry --save

Example of Usage

Import XMasonry and XBlock components:

import { XMasonry, XBlock } from "react-xmasonry";

The simplest layout using JSX and a little styling looks as following:

<XMasonry>
    <XBlock>
        <div className="card">
            <h1>Card One</h1>
            <p>Any text</p>
        </div>
    </XBlock>
    <XBlock width="2">
        <div className="card">
            <h1>Card Two</h1>
            <p>Any text</p>
        </div>
    </XBlock>
</XMasonry>

There is no more JavaScript than positioning and sizing! Use any CSS to make animations and transitions you like (.xmasonry and .xblock selectors), for example:

@keyframes comeIn {
    0% { transform: scale(0) }
    75% { transform: scale(1.03) }
    100% { transform: scale(1) }
}

.xmasonry .xblock {
    animation: comeIn ease 0.5s;
    animation-iteration-count: 1;
}

.card {
    margin: 10px;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0 1px 3px darkgray;
}

See the example page sources.

Using Components

There are several properties you can assign to XMasonry and XBlock components.

<XMasonry> Component Properties

<XBlock> Component Properties