react-masonry-css - React Masonry layout component powered by CSS, dependancy free

  •        9

A new masonry component powered by CSS to be fast loading and free of jQuery or other dependencies. Build specifically for React projects. Existing solutions like React wrapped DeSandro Masonry, while popular, don't actually leverage React's highly optimized Virtual DOM renderer and in DeSandro Masonry's case, actually renders elements twice before showing the layout. All of this is ok but we found it to lead to a slow, "laggy" user experience that would occasionally miss-render our layout.

https://github.com/paulcollett/react-masonry-css#readme
https://github.com/paulcollett/react-masonry-css

Tags
Implementation
License
Platform

   




Related Projects

react-native-masonry - :raised_hands: A pure JS react-native component to render a masonry~ish layout for images with support for dynamic columns, progressive image loading, device rotation, on-press handlers, and headers/captions

  •    Javascript

"Bricks" are the basic building block of the masonry and are passed into the props.bricks. They essentially represent the items within each column and require a uri property at a minimum. However, you can freely add additional properties to the data property if you need access to certain data within your brick.onPress handler and footer/header renderer. The following properties are available.

react-masonry-component - A React.js component for using @desandro's Masonry

  •    Javascript

if you wish to have IE8 support, v2 with React 0.14 is the highest version available. To use the component just require the module.

mauerwerk - ⚒ A react-spring driven masonry-like grid with enter/exit and shared element transitions

  •    Javascript

These two would work outside the Grids context if you wanted to use them elsewhere. mauerwerk depends on react-spring and react-measure.

react-stack-grid - Pinterest like layout components for React.js

  •    Javascript

Pinterest like layout components for React.js. You can install the react-stack-grid from npm.

driveway - pure CSS masonry layouts

  •    HTML

driveway is an explorative project for developing pure CSS masonry layouts. It is developed using stylus. You may have come here from the blog post I wrote about pure CSS masonry layouts. If that's the case and you want the exact code I used in that post(with vendor prefixing), you'll be best served looking in the dist folder for driveway.blog.css and driveway.blog.min.css. Alternatively, use bower to pull in the repo.


react-flexbox-grid - A set of React components implementing flexboxgrid with the power of CSS Modules

  •    Javascript

react-flexbox-grid is a set of React components that implement flexboxgrid.css. It even has an optional support for CSS Modules with some extra configuration.react-flexbox-grid imports the styles from flexboxgrid, that's why we're configuring the loader for it.

salvattore - A jQuery Masonry alternative with CSS-driven configuration.

  •    Javascript

Salvattore is a library agnostic JS script that will help you organize your HTML elements according to the number of columns you specify, like jQuery Masonry. To find out more and see it in action, please visit our website.

rebass - :atom_symbol: React UI component library & design system, built with styled-components and styled-system

  •    Javascript

React UI component library & design system, built with styled-system, with support for styled-components & emotion. Rebass is a library of highly-composable, primitive UI components for React, built with styled-components to keep styles isolated and reduce the need to write custom CSS in your application. Based upon a configurable design system, Rebass‘s props API makes building consistent, responsive web apps simpler and faster.

react-native-tableview-simple - Flexible and lightweight React Native component for UITableView made with pure CSS

  •    Javascript

This cross-platform component is inspired by the iOS-TableView. Made with pure CSS, the intention is to provide a flexible and lightweight alternative to a bridged component. react-native-tableview-simple provides you with some predefined CSS-styles, inspired by the native TableView. You can always mix the Cell-instances inside a Section, with other (React-Native)-Views. Therefore the Cell-Component itself can't be manipulated heavily.

react-css-modules - Seamless mapping of class names to CSS modules inside of React components.

  •    Javascript

If you are considering to use react-css-modules, evaluate if babel-plugin-react-css-modules covers your use case. babel-plugin-react-css-modules is a lightweight alternative of react-css-modules. babel-plugin-react-css-modules is not a drop-in replacement and does not cover all the use cases of react-css-modules. However, it has a lot smaller performance overhead (0-10% vs +50%; see Performance) and a lot smaller size footprint (less than 2kb vs +17kb).

grid-styled - Responsive React grid system built with styled-system

  •    Javascript

The Box component handles width, margin and padding. All grid-styled components use styled-system for style props, which pick up values from a theme and allow for responsive styles to be passed as array values.

reflexbox - React flexbox layout and grid system

  •    Javascript

Primitive for controlling width, margin, padding and more. Both <Flex /> and <Box /> share the same props.

styled-css-grid - 🍱 A tiny CSS grid layout for React

  •    Javascript

A tiny (~2kb) CSS grid layout for React, built with styled-components 💅. See the website.

react-datepicker - A simple and reusable datepicker component for React

  •    Javascript

You’ll need to install React, PropTypes, and Moment.js separately since those dependencies aren’t included in the package. Below is a simple example of how to use the Datepicker in a React view. You will also need to require the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does). See here for a full list of props that may be passed to the component. Examples are given on the main website.

react-mdl - React Components for Material Design Lite

  •    CSS

This library is now deprecated. It's higly recommended to use Material Design Components instead. Instead of using the official material.css and material.js files from the MDL project, you should use the files we provide in /extra. The reason to that is because the official Layout component is not fully compatible with React. We made a patch and we re-exported everything so people can still use it. If you're worried about the changes we made, you can take a look at the patch note or read about the issue in this ticket.

react-native-css - Style React-Native components with css

  •    Javascript

React-native-css turns valid CSS into the Facebook subset of CSS. if you still want access to the the old implementation, please check v1 branch.

waterfall.js - Tired of use creepy hacks or heavy ways to get a Grid based on Pinterest?

  •    Javascript

This question has a good point. Yes, there are CSS ways to solve this, using flexbox or columns technic, but this doesn't work well when you don't know about your data/structure. So we have to use JavaScript. The challenge is create a decent algorithm where the structure doesn't matter: Waterfall will work. ⚠️ The latest stable is waterfall-1.0.2 (which is used in the website), newest versions are suffering issues from a major rewrite.

react-foundation - Foundation as React components.

  •    Javascript

Foundation as React components. Foundation is both feature-rich and easy to customize. React on the other hand is awesome because of its simplicity. It's even more awesome when combined with Redux and Immutable.

react-media - CSS media queries for React

  •    Javascript

react-media is a CSS media query component for React.A <Media> component listens for matches to a CSS media query and renders stuff based on whether the query matches or not.

react-flip-move - Effortless animation between DOM changes (eg

  •    Javascript

This module was built to tackle the common but arduous problem of animating a list of items when the list's order changes. CSS transitions only work for CSS properties. If your list is shuffled, the items have rearranged themselves, but without the use of CSS. The DOM nodes don't know that their on-screen location has changed; from their perspective, they've been removed and inserted elsewhere in the document.