All Projects → sanchitnevgi → react-mason

sanchitnevgi / react-mason

Licence: other
React Masonry grid

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to react-mason

Egjs Infinitegrid
A module used to arrange card elements including content infinitely on a grid layout.
Stars: ✭ 751 (+5676.92%)
Mutual labels:  grid, masonry
Reflexbox
Moved to https://rebassjs.org
Stars: ✭ 1,369 (+10430.77%)
Mutual labels:  grid, react-component
React Grid Carousel
React responsive carousel component w/ grid layout
Stars: ✭ 29 (+123.08%)
Mutual labels:  grid, react-component
React Xmasonry
Simple, minimalistic and featured native masonry layout for React JS.
Stars: ✭ 62 (+376.92%)
Mutual labels:  react-component, masonry
griding
🧱 lean grid & responsive for react
Stars: ✭ 18 (+38.46%)
Mutual labels:  grid, react-component
visual-portfolio
Portfolio layouts visual editor with Gutenberg support
Stars: ✭ 31 (+138.46%)
Mutual labels:  grid, masonry
React Stonecutter
Animated grid layout component for React
Stars: ✭ 1,089 (+8276.92%)
Mutual labels:  grid, react-component
masonry-css
Create mosaic grid, like masonry, with css only
Stars: ✭ 17 (+30.77%)
Mutual labels:  grid, masonry
Shuffle
Categorize, sort, and filter a responsive grid of items
Stars: ✭ 2,170 (+16592.31%)
Mutual labels:  grid, masonry
Vue Magic Grid
🧙‍♂️🔌 Responsive Magic Grid for Vue
Stars: ✭ 162 (+1146.15%)
Mutual labels:  grid, masonry
Masonry Layout
An efficient and fast web component that gives you a beautiful masonry layout
Stars: ✭ 43 (+230.77%)
Mutual labels:  grid, masonry
react-super-styled
Responsive JSX layouts with Styled Components
Stars: ✭ 77 (+492.31%)
Mutual labels:  grid, react-component
Niui
Lightweight, feature-rich, accessible front-end library
Stars: ✭ 152 (+1069.23%)
Mutual labels:  grid, masonry
react-bolivianite-grid
React grid component for virtualized rendering large tabular data.
Stars: ✭ 95 (+630.77%)
Mutual labels:  grid, react-component
egjs-grid
A component that can arrange items according to the type of grids
Stars: ✭ 188 (+1346.15%)
Mutual labels:  grid, masonry
neat-components
A styled-components implementation of Thoughtbot's Neat
Stars: ✭ 32 (+146.15%)
Mutual labels:  grid
bootstrap-grid-card
Bootstrap grid in Lovelace UI
Stars: ✭ 25 (+92.31%)
Mutual labels:  grid
whatsapp-clone-react
Build a WhatsApp Clone with React JS and FireBase.
Stars: ✭ 38 (+192.31%)
Mutual labels:  react-component
react-ssr-error-boundary
No description or website provided.
Stars: ✭ 33 (+153.85%)
Mutual labels:  react-component
react-native-tabbar
A tabbar component for React Native
Stars: ✭ 59 (+353.85%)
Mutual labels:  react-component

react-mason

Masonry usage

react-mason is a masonry-grid component.

Installation

npm install react-mason

Usage

Pass children to the Masonry component

import React, { Component } from 'react';
import Masonry from 'react-mason';
import Photo from './Photo';

class PhotoAlbum extends Component {
  render() {
    return (
      <Masonry>
        {
          this.props.photos.map(photo => <Photo {...photo} />)
        }
      </Masonry>
    )
  }
}
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].