Package Exports

react-xmasonry

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-xmasonry) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

Preview

Screenshot

Too see the preview in action, open the demo page.